Глубокое погружение в Redux: промежуточное ПО и асинхронные действия

Redux быстро стал одной из наиболее широко используемых библиотек для управления состоянием в приложениях JavaScript. Хотя основная концепция Redux проста (управление состоянием в одном неизменяемом хранилище данных), он также предлагает более продвинутые функции, такие как промежуточное ПО и поддерживает асинхронные действия. Сегодня мы рассмотрим эти передовые концепции и посмотрим, как они могут помочь нам создавать более надежные приложения React.

ПО промежуточного слоя Redux

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

Чтобы применить промежуточное ПО, вы можете использовать функцию applyMiddleware() из Redux:

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(logger));

В этом примере мы используем промежуточное ПО redux-logger, которое регистрирует каждое отправленное действие и состояние хранилища после отправки.

Асинхронные действия

По умолчанию создатели действий Redux являются синхронными, что означает, что они не могут напрямую обрабатывать такие задачи, как вызовы API. Однако промежуточное ПО, такое как redux-thunk, позволяет нам создавать генераторы асинхронных действий.

Чтобы настроить redux-thunk, вам необходимо установить его и применить в качестве промежуточного программного обеспечения:

npm install redux-thunk
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

С установленным redux-thunk мы можем создавать генераторы асинхронных действий, которые возвращают функцию вместо действия:

export const fetchTodos = () => async dispatch => {
  dispatch({ type: 'FETCH_TODOS_START' });

  try {
    const response = await fetch('/api/todos');
    const todos = await response.json();

    dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: todos });
  } catch (error) {
    dispatch({ type: 'FETCH_TODOS_FAILURE', error });
  }
};

В этом примере fetchTodos — это генератор асинхронных действий, который получает задачи из API. Он отправляет FETCH_TODOS_START перед выполнением запроса API, а затем отправляет либо FETCH_TODOS_SUCCESS с результатом, либо FETCH_TODOS_FAILURE с ошибкой.

Заключение

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