redux-thunk промежуточного программного обеспечения redux

внешний интерфейс JavaScript React.js Redux

Основная концепция редукции на самом деле очень проста: сохранить состояние, которое необходимо изменить, в хранилище, инициировать действие для описания того, что произошло, и использовать редукторы для описания того, как действие изменяет дерево состояний. При создании магазина нужно передать редьюсер, что действительно может изменить данные в магазине, так это store.dispatch API.

1. Концепция

После отправки действия, прежде чем достичь редюсера, требуется промежуточное ПО для выполнения некоторых дополнительных операций. Вы можете использовать промежуточное ПО Redux для ведения журнала, создания отчетов о сбоях, вызова асинхронных интерфейсов или маршрутизации и многого другого.

Другими словами, промежуточное ПО является усовершенствованием store.dispatch().

2. Использование промежуточного программного обеспечения

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
    reducers, 
    applyMiddleware(thunk)
);

Непосредственно введите промежуточное ПО thunk, поместите его в метод applyMiddleware и передайте в метод createStore, чтобы завершить расширение функции store.dispatch(). То есть в редьюсере могут выполняться некоторые асинхронные операции.

3.applyMiddleware()

По сути, applyMiddleware — это нативный метод Redux, который формирует массив всех middleware и последовательно их выполняет. Больше промежуточного программного обеспечения может быть передано в качестве параметров по очереди.

const store = createStore(
    reducers, 
    applyMiddleware(thunk, logger)
);

Если вы хотите понять процесс его эволюции, вы можете перейти к официальной документации Redux: https://redux.js.org/advanced/middleware.

4.redux-thunk

Проанализируйте исходный код redux-thunknode_modules/redux-thunk/src/index.js

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;

промежуточное ПО redux-thunkexport defaultявляетсяcreateThunkMiddleware()После удара посмотри еще разcreateThunkMiddlewareЭта функция возвращает каррированную функцию. Код, который мы переводим в ES5, легче увидеть,

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

                return next(action);
            };
        }
    }
}

Глядя на это таким образом, вы можете увидеть, что самая важная идея redux-thunk заключается в том, что он может принимать создателя действия, который возвращает функцию. Если создатель действия возвращает функцию, выполните ее, если нет, выполните ее в соответствии с исходным следующим (действием).

Поскольку этот создатель действия может возвращать функцию, в этой функции можно выполнять некоторые асинхронные операции. Например:

export function addCount() {
    return {type: ADD_COUNT}
}

export function addCountAsync() {
   return dispatch => {
       setTimeout( () => {
           dispatch(addCount())
        },2000)
    }
}

addCountAsyncФункция возвращает функцию, передает диспетчеризацию в качестве первого параметра функции и выполняет асинхронные операции внутри функции.

Справочная документация: http://www.redux.org.cn/docs/advanced/Middleware.html

Категории