通过 connect 和 mapDispatchToProps 反应 redux 传递事件处理程序与使用道具渲染孩子

Posted 2023-02-23

【中文标题】通过 connect 和 mapDispatchToProps 反应 redux 传递事件处理程序与使用道具渲染孩子

【英文标题】：React redux passing event handler through connect & mapDispatchToProps vs. rendering child with props

【发布时间】：2016-12-28 11:02:33

【问题描述】：

通过 react-redux 文档，我试图了解为什么 todo example 使用 connect 和 mapDispatchToProps 与为什么 reddit example 使用更传统的渲染方法并通过处理程序将调度作为道具传递给子组件。是否有一个原因？我只能猜测这是因为前一个示例的容器组件仅对应于 一个 表示组件，而后一个示例的容器组件包含 两个 表示组件，因此没有意义在两个组件上使用连接（也不可能）。

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>
...

【参考方案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);

【讨论】：

对于您的额外提示，您将如何重写 mapDispatchToProps 函数以利用 bindActionCreators？

@jeevcat 查看更新的答案。请注意，它未经测试。我只是在我的移动应用程序上输入的。希望对您有所帮助。