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

1. Действия.
   Действия — это простые объекты JavaScript, которые представляют собой намерение изменить состояние. У них должно быть свойство type, описывающее тип выполняемого действия. Вот пример:

const incrementCounter = () => {
  return {
    type: 'INCREMENT_COUNTER'
  };
};

1. Редукторы:
   Редукторы определяют, как изменяется состояние приложения в ответ на действия. Это чистые функции, которые принимают текущее состояние и действие в качестве аргументов и возвращают новое состояние. Вот пример:

const initialState = {
  counter: 0
};
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
};

1. Хранилище:
   Хранилище хранит состояние приложения и разрешает доступ к нему. Он создается с помощью функции createStore, предоставляемой Redux. Вот пример:

import { createStore } from 'redux';
const store = createStore(counterReducer);

1. Отправка:
   Чтобы вызвать изменение состояния, нам нужно отправить действия в хранилище. Затем хранилище вызывает редуктор, передавая текущее состояние и действие. Вот пример:

store.dispatch(incrementCounter());

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

const loggerMiddleware = (store) => (next) => (action) => {
  console.log('Dispatching:', action);
  const result = next(action);
  console.log('Next state:', store.getState());
  return result;
};
// Applying middleware to the store
import { applyMiddleware, createStore } from 'redux';
const store = createStore(counterReducer, applyMiddleware(loggerMiddleware));

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