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: этот параметр может быть либо функцией, либо объектом.

Если это функция, она будет вызвана один разна создание компонента.Он получит диспетчеризацию в качестве аргумента и должен вернуть объект, полный функций, которые используют диспетчеризацию для диспетчеризации действий.

Если это объект, полный создателей действий, каждый создатель действий будет превращен в функцию поддержки, которая автоматически отправляет свое действие при вызове.Примечание: мы рекомендуем использовать эту форму «Сокращения объектов».

Но я изо всех сил пытаюсь понять, с помощью этого существующего кода, который работает функции цепочки стрелок (еще один уровень функций):

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)));
    }
}

Эта функция затем отображается в редуксе connect:

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

Из приведенного выше кода,createBillingRun возвращает дополнительный слой функции, поэтому, если я выполню createBillingRun(123), он вернет функцию, которая принимает dispatch в качестве параметра, что аналогично первому примеру, который передается в connect.Так, кто выполняет внутреннюю функцию?

Может кто-нибудь помочь мне понять, почему функции цепных стрелок будут работать?

Answer 1

Когда ваш mapDispatchToProps возвращает объект, «предполагается, что он является создателем действий Redux».(https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)

Создатели действий должны возвращать действия, которые "являются простыми объектами JavaScript." (https://redux.js.org/basics/actions)

Возможность вернуть функцию от создателя действия обеспечивается за счет избыточности-спасибо, поэтому убедитесь, что вы применяете его в качестве промежуточного программного обеспечения. (https://github.com/reduxjs/redux-thunk)

import ReduxThunk from 'redux-thunk'

...

const createStoreWithMiddleware = applyMiddleware(ReduxThunk)(createStore);

Answer 2

Это работает, только если у вас установлен 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;