带有链式箭头函数的 redux mapDispatchToProps

Question

我能看懂下面的示例代码：

const mapStateToProps = state => {
  return {
    todo: state.todos[0]
  }
}

const mapDispatchToProps = dispatch => {
  return {
    destroyTodo: () =>
      dispatch({
        type: 'DESTROY_TODO'
      })
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoItem)

当在组件中时，我可以调用this.props.destroyTodo()，以便它在函数内执行dispatch(...)。

这是根据手册（如果是函数）：

mapDispatchToProps：这个参数可以是一个函数，也可以是一个 对象。

如果它是一个函数，它会在组件创建时被调用一次。它 将接收调度作为参数，并应返回一个完整的对象 使用 dispatch 来调度动作的函数。

如果它是一个对象 充满动作创造者，每个动作创造者都将变成一个 调用时自动调度其动作的 prop 函数。 注意：我们建议使用这种“对象速记”形式。

但我很难理解这个现有代码工作链接箭头函数（另一层函数）：

export const createBillingRun = id => dispatch => {
    $.ajax({
        type: 'POST',
        url: `/api/billing/billingtypes/${id}/createrun/`,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
    }).done(() => dispatch(pollBillingRuns(id)));
};

我这里已经转换成传统语法了：

export const createBillingRun = function(id) {
    return function(dispatch){
         $.ajax({
            type: 'POST',
            url: `/api/billing/billingtypes/${id}/createrun/`,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
        }).done(() => dispatch(pollBillingRuns(id)));
    }
}

这个函数然后映射到redux connect:

export default connect(
    {...},
    {
        createBillingRun
    },
)(ThePage);

从上面的代码中，createBillingRun返回了一层额外的函数，所以如果我执行createBillingRun(123)，它会返回一个接受dispatch作为参数的函数，类似于第一个被传递的例子进入connect。那么谁在执行内部函数呢？

有人可以帮我理解为什么链式箭头函数会起作用吗？

Answer 1

这仅在您安装了 Redux Thunk 时才有效。它是一个中间件，可以查看您何时返回一个函数、传递该函数调度并调用它。

https://github.com/reduxjs/redux-thunk

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

Answer 2

当您的 mapDispatchToProps 返回一个对象时，“它被假定为 Redux 操作创建者。” (https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)

动作创建者应该返回“纯 JavaScript 对象”的动作。 (https://redux.js.org/basics/actions)

redux-thunk 提供了从动作创建者返回函数的能力，因此请确保将其作为中间件应用。 (https://github.com/reduxjs/redux-thunk)

import ReduxThunk from 'redux-thunk'

...

const createStoreWithMiddleware = applyMiddleware(ReduxThunk)(createStore);