Question

通过react-redux文档，我试图理解为什么 todo example使用connect和mapDispatchToProps与reddit example使用更传统的渲染方法＆amp;将调度通过处理程序作为道具传递给子组件。是否有一个原因？我只能猜测它是因为前一个示例的容器组件只对应一个表示组件，而后一个示例的容器组件包含两个表示组件因此在两个组件上使用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直接传递给组件。您希望通过mapDispatchToProps传递特定的动作创建者。

我认为它归结为编码标准，真的。如果您决定严格对待组件并且不允许他们直接发送任何操作，您可以使用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);

React redux通过connect＆amp; amp;传递事件处理程序mapDispatchToProps与渲染带道具的子项

1 个答案: