reactjs - 加载路由时如何从无状态组件分派(dispatch) Redux 操作？

Question

目标:加载react-router路由时，分派(dispatch)请求异步的Redux操作Saga Worker 来获取该路由的底层无状态组件的数据。

问题:无状态组件只是函数，没有生命周期方法，例如 componentDidMount，因此我无法(？)从函数内部调度 Redux 操作。

我的问题部分与 Converting stateful React component to stateless functional component: How to implement "componentDidMount" kind of functionality? 有关，但我的目标是仅仅调度一个 Redux 操作，请求异步将数据填充到存储中(我使用 Saga，但我认为这与问题无关，因为我的目标只是调度一个普通的 Redux 操作)，之后由于 data prop 的更改，无状态组件将重新渲染。

我正在考虑两种方法:要么使用 react-router 的某些功能，或 Redux 的 connect方法。有没有所谓的“React-way”来实现我的目标？

编辑:到目前为止，我想出的唯一解决方案是在mapDispatchToProps内分派(dispatch)操作，这样:

const mapStateToProps = (state, ownProps) => ({
    data: state.myReducer.data // data rendered by the stateless component
});

const mapDispatchToProps = (dispatch) => {
    // catched by a Saga watcher, and further delivered to a Saga worker that asynchronically fetches data to the store
    dispatch({ type: myActionTypes.DATA_GET_REQUEST });
    return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(MyStatelessComponent);

但是，这似乎有些肮脏，而且不是正确的方法。

Answer 1

我不知道为什么你绝对想要一个无状态组件，而带有 componentDidMount 的有状态组件可以以简单的方式完成这项工作。

在 mapDispatchToProps 中调度操作非常危险，不仅可能导致在挂载时调度，而且在 ownProps 或 store props 更改时也可能导致调度。这种方法预计不会产生副作用，应该保持纯净。

保持组件无状态的一种简单方法是将其包装到 HOC (Higher-Order Component) 中。您可以轻松创建:

MyStatelessComponent = withLifecycleDispatch(dispatch => ({
   componentDidMount: function() { dispatch({ type: myActionTypes.DATA_GET_REQUEST })};
}))(MyStatelessComponent)

请注意，如果您在此 HOC 之后使用 Redux connect，则可以轻松地直接从 props 访问分派(dispatch)，就好像您不使用 mapDispatchToProps 一样，分派(dispatch)已注入(inject)。

然后你可以做一些非常简单的事情，例如:

let MyStatelessComponent = ...

MyStatelessComponent = withLifecycle({
   componentDidMount: () => this.props.dispatch({ type: myActionTypes.DATA_GET_REQUEST });
})(MyStatelessComponent)

export default connect(state => ({
   date: state.myReducer.data
}))(MyStatelessComponent);

HOC 定义:

import { createClass } from 'react';

const withLifeCycle = (spec) => (BaseComponent) => {
  return createClass({
    ...spec,
    render() {
      return BaseComponent();
    }
  })
}

<小时/>

以下是您可以执行的操作的简单实现:

const onMount = (onMountFn) => (Component) => React.createClass({
   componentDidMount() {
     onMountFn(this.props);
   },
   render() { 
      return <Component {...this.props} />
   }  
});

let Hello = (props) => (
   <div>Hello {props.name}</div>
)

Hello = onMount((mountProps) => {
   alert("mounting, and props are accessible: name=" + mountProps.name)
})(Hello)

如果您在 Hello 组件周围使用 connect，您可以将调度作为 props 注入(inject)并使用它而不是警报消息。

JsFiddle