在没有 mapDispatchToProps 的情况下连接如何工作 [英] How does connect work without mapDispatchToProps

问题描述

我正在阅读 redux 的示例文档，我发现了这个容器组件示例.有人可以解释为什么在这种情况下这里不需要 mapDispatchToProps .还有，函数是怎么得到调度函数的?

从 'react' 导入 React从'react-redux'导入{连接}从 '../actions' 导入 { addTodo }让 AddTodo = ({ dispatch }) =>{让输入返回 (<div><form onSubmit={e =>{e.preventDefault()如果 (!input.value.trim()) {返回}dispatch(addTodo(input.value))输入值 = ''}}><输入参考={节点=>{输入 = 节点}}/><按钮类型=提交">添加待办事项</表单>

)}AddTodo = connect()(AddTodo)导出默认 AddTodo

解决方案

connect()(AddTodo) 会将 dispatch 作为 prop 传递给 AddTodocode> 组件，即使没有状态或预定义的操作，它仍然很有用.这就是您的代码中不需要 mapDispatchToProps 的原因

现在在你的组件中 let AddTodo = ({ dispatch }) =>{ 你正在解构你的 props 以只访问 dispatch.

如果您使用 mapDispatchToProps，您将使您的 addTodo 操作可用作组件的道具，然后像 this.props.addTodo<一样调用它/代码>.所以上述方法是一种替代方法.这取决于你选择你觉得舒服的东西

connect 只是通过 React 上下文传递 store/dispatch 所以你不必通过许多组件传递 store.不过，您不必使用连接.任何模块/HOC 模式都可以工作，连接恰好是一个使用方便的东西.

在组件中使用 dispatch 或使用 mapDispatchToProps 是一回事.

然而，使用 mapDispatchToProps 可以让您更灵活地构建代码并将所有动作创建者集中在一处.

根据文档:

<块引用>

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps](对象或函数):

如果传递了一个对象，则假定其中的每个函数都是 Redux 操作创建者.具有相同函数名称的对象，但具有每个动作创建者都包含在一个调度调用中，因此它们可能是直接调用，会合并到组件的props中.

如果一个函数被传递，它将作为第一个参数被分配.返回一个以某种方式使用的对象取决于你dispatch 以您自己的方式绑定动作创建者.(提示:您可以使用来自 Redux 的 bindActionCreators() 助手.)

如果你的 mapDispatchToProps 函数被声明为需要两个参数，它将以 dispatch 作为第一个参数被调用，并且作为第二个参数传递给连接组件的道具，并且将在连接的组件收到新的时重新调用道具.(第二个参数通常被称为 ownProps约定.)

如果您不提供自己的 mapDispatchToProps 函数或对象充满动作创建者，默认mapDispatchToProps实现只是将 dispatch 注入到组件的 props 中.

I was reading the example docs for redux and I found this example of a container component. Can someone explain why in this case mapDispatchToProps is not needed here. As well, how is the function getting the dispatch function?

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
let input

return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

解决方案

connect()(AddTodo) will pass dispatch as a prop to AddTodo component, which is still useful even without state or predefined actions. Thats the reason mapDispatchToProps is not needed in your code

Now in your component let AddTodo = ({ dispatch }) => { you are destructuring your props to only access dispatch.

If you make use of mapDispatchToProps you will make your addTodo action available as a prop to your component and then call it like this.props.addTodo. So the above approach is an alternative. It depends on you to choose what you feel comfortable with

connect just passes store / dispatch through React context so you don't have to pass the store through many components. You don't have to use connect though. Any module / HOC pattern could work, connect just happens to be a convenient thing to use.

Using dispatch in the component or using mapDispatchToProps are one and the same thing.

However using mapDispatchToProps gives you much more flexibility in structuring your code and having all the action creators at one place.

As per the docs:

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

If a function is passed, it will be given dispatch as the first parameter. It’s up to you to return an object that somehow uses dispatch to bind action creators in your own way. (Tip: you may use the bindActionCreators() helper from Redux.)

If your mapDispatchToProps function is declared as taking two parameters, it will be called with dispatch as the first parameter and the props passed to the connected component as the second parameter, and will be re-invoked whenever the connected component receives new props. (The second parameter is normally referred to as ownProps by convention.)

If you do not supply your own mapDispatchToProps function or object full of action creators, the default mapDispatchToProps implementation just injects dispatch into your component’s props.

这篇关于在没有 mapDispatchToProps 的情况下连接如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！