【问题标题】:Input order in a Redux mapDispatchToProps declarationRedux mapDispatchToProps 声明中的输入顺序
【发布时间】:2019-12-25 20:57:18
【问题描述】:

我无法理解的是,在这个柯里化风格声明中,为什么调度输入是第二个?

connect 不是以 dispatch 作为输入调用这个函数,然后将返回值分配给 props 吗?所以返回值应该是获取 id 作为输入并执行某些操作的函数。

但是以我对柯里化的理解,这个函数应该首先用一个id作为输入调用,然后可以用dispatch输入调用返回的函数。

export const mapDispatchToProps = id => dispatch => {
    //e.g. dispatch an action that deletes that id
};

那么为什么这个函数是正确的呢?

【问题讨论】:

  • mapDispatchToProps 到底在这里做什么?您能否提供更多代码以更好地了解 id 和 dispatch 的用途?

标签: javascript redux react-redux


【解决方案1】:

如果你这样做了

connect(null, mapDispatchToProps)(Component1)

它不会起作用。

截至documentation

mapDispatchToProps 参数可以有两种形式。虽然函数形式允许更多的自定义,但对象形式易于使用。

  • 函数形式:允许更多的自定义,获得调度和可选的 ownProps 的访问权限
  • 对象简写形式:更具声明性和更易于使用

函数形式应该返回对象,但是你的mapDispatchToProps返回的是函数,所以会被忽略。

我认为当 Redux 与 Redux-thunk 一起使用时,您将此函数视为动作创建者。这样它就可以工作,但它应该像 connect(null, { mapDispatchToProps })(Component1) 这样作为对象道具传递。这样,Component1 就可以使用它。

在内部,connect 执行以下操作

  1. 如果您将函数作为mapDispatchToProps 传递,它将以dispatch 作为第一个参数调用。 connect 期望作为结果的对象将被合并到道具中。

    mapDispatchToProps可以如下实现

     mapDispatchToProps = dispatch => ({
         changeID (id) {
             return dispatch => /* some code */
         }
     })
    

    组件将接收changeID 函数作为道具。而且这个功能只能与 Redux-thunk 一起使用。当组件调用 changeID 时,Redux 会将其传递给 Redux-thunk,然后 Redux-thunk 会以 dispatch 作为第一个参数来调用内部函数。

  2. 如果您将对象作为mapDispatchToProps 传递,则该对象的所有道具都将成为组件道具的一部分

    mapDispatchToProps = {
        changeID (id) {
            return dispatch => /* some code */
        }
    }
    

    基本上它的工作方式与第 1 点中的代码相同。

所以主要思想是任何带有签名的函数

const SomeFunc = id => dispatch => { /* code */ }

只能与 Redux-thunk 一起使用。 Redux-thunk 将调用提供dispatch 作为第一个参数的内部函数。

如果没有 Redux-thunk,则仅允许以下动作创建者

const SomeFunc = id => ({ type: 'ACTION', id })

它们只是动作创建者。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多