javascript - React redux 通过 connect 和 mapDispatchToProps 传递事件处理程序与使用 props 渲染子进程

Question

浏览react-redux文档，我试图理解为什么 todo example使用 connect 和 mapDispatchToProps 以及为什么 reddit example使用更传统的渲染方法并通过处理程序将调度作为 Prop 传递给子组件。是否有一个原因？我只能猜测这是因为前一个示例的容器组件仅对应一个演示组件，而后一个示例的容器组件包含两个演示组件，所以它没有意义在两个组件上使用 connect (也不可能)。

todo example :

const getVisibleTodos = (todos, filter) => {
...

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

reddit example :

class App extends Component {
...
  handleChange(nextReddit) {
    this.props.dispatch(selectReddit(nextReddit))
  }
...

render() {
    ...
    return (
      <div>
        <Picker value={selectedReddit}
                onChange={this.handleChange}
                options={[ 'reactjs', 'frontend' ]} />
        <p>
...

Answer 1

将 dispatch 传递给您的组件是完全可以的，除非您不希望组件滥用 dispatch 函数并分派(dispatch)不应该从中分派(dispatch)的操作那个组件!

如果您想限制组件，则不希望将 dispatch 直接传递给组件。您需要通过 mapDispatchToProps 传递特定的操作创建者。

我认为这实际上可以归结为编码标准。如果您决定严格控制组件并且不允许它们直接分派(dispatch)任何操作，则可以使用mapDispatchToProps仅传递特定操作创建者。

奖励:在第一个示例中，您将 (id) =>dispatch(toggleTodo(id)) 函数传递给您的组件。尝试使用 redux 中的 bindActionCreators而不是手动创建该函数!祝你好运。

更新

export const dataLoadRequest = () => {
  return {
    type: 'DATA_LOAD_REQUEST',
  }
}

在您的 Component.js 文件中，您需要导入两个内容。

import { dataLoadRequest } from 'actions.js';
import { bindActionCreators } from 'redux';

class Component extends React.Component{
  ...
  componentDidMount(){
    this.props.actions.dataLoadRequest();
  }
  ...
}

const mapStateToProps = (state) => ({
  ...
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(dataLoadRequest, dispatch)
});

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