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：此参数可以是函数，也可以是   对象。

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

如果是对象   充满动作创造者，每个动作创造者都会变成一个   调用时自动调度其行为的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);

带有链接箭头功能的redux mapDispatchToProps

2 个答案: