Что такое Redux?
Redux — это инструмент управления состояниями, используемый при построении сложных веб-приложений с помощью javascript-фреймворков. React-Redux создан специально для фреймворка react и поддерживается командой Redux.

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

Нужна ли она вам?
Если вы создаете веб-порталы или любые веб-приложения с интенсивным использованием данных, то да, она вам понадобится для управления данными, отправляемыми и получаемыми с сервера за определенное время.

В статье показано, как настроить и структурировать react-redux для удобства использования. По сути, это шаблонный код, необходимый для начала работы.

Давайте приступим
В React-Redux есть три основных компонента

• хранилище
• действия
• редукторы
• Store — как следует из названия, это как бы хранилище, в котором находятся все наши данные. То есть здесь хранятся все наши состояния.

Действия — как следует из названия, действия — это инструкции, которые пользователь отдает редуктору для записи или получения данных из хранилища. Они представляют собой объекты с двумя основными свойствами: {type: «DO_THIS», payload: dataObject} .

Редукторы — редукторы представляют собой функции, которые принимают действия от приложения, выполняют действие и возвращают новое состояние, основанное на этом действии

Установка
npm i redux react-redux redux-thunk

создайте папку store в каталоге /src
В каталоге /src/store добавьте файл index.js в папку store
В каталоге /src добавьте папку Actions
В /src добавьте папку Reducers

Это должно выглядеть примерно так:

В /src/actions/ файлы действий создаются в соответствии с модулями, чтобы сгруппировать схожие задачи. Например, AuthenticationActions.js — может содержать signInAction(); logoutAction(); BlogActions.js — может содержать getBlogPostAction(); deleteCommentAction(); updateBlogPostAction(); и т.д..
Для данного примера мы создадим файл TestAction.js, который будет получать пользователей с сайта https://jsonplaceholder.typicode.com/users.

В файле /src/actions/TestAction.js,

	
export const getAllPosts = () => {
  return (dispatch) => {
    //   fetch placeholder data from jsonplaceholder
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((result) =>
        //dispatch response to the store
        dispatch({ type: "DO_THIS", payload: result })
      );
  };
};

В каталоге /src/reducer/ создайте файл TestReducer.js, в котором можно создать несколько редукторов для обработки состояния определенных модулей нашего приложения.
Создадим функцию Test Reducer, принимающую два параметра,

• state (по умолчанию устанавливается исходное состояние) и action
• Используйте switch для проверки типа действия и последующего обновления состояния.

В файле /src/reducer/TestReducer.js

	
const initialState = {
  users: null,
};

export default function TestReducer(state = initialState, action) {
  switch (action.type) {
    case "DO_THIS":
      return {
        ...state,
        users: action.payload,
      };
    default:
      return state;
  }
}

В каталоге /src/reducer/ создайте файл index.js для объединения всех редукторов в папке Reducer. Redux предоставляет нам функцию combineReducer для объединения всех редукторов в приложении.

• const reducer = combineReducer({});

В файле /src/reducer/TestReducer.js,

	
import { combineReducers } from "redux";
import TestReducer from "./TestReducer";

const reducers = combineReducers({
  Test: TestReducer,
  //other reducers come here...
});

export default reducers;

В файле /src/store/index.js создайте хранилище для всех созданных редукторов.

	
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import reducers from "./Reducers";

//thunk middleware is used to intercept actions so as to make API call before dispatching result to reducer
const store = createStore(reducers, applyMiddleware(thunk));

export default store;

В Index.js глобально предоставьте хранилище приложению

	
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

Структура файла Store должна выглядеть следующим образом

Чтобы собрать все воедино

В App.js,

импортируем хук useDispatch для диспетчеризации действия, которое будет получать пользователей с удаленного сервера
это действие на монтируемом компоненте,
/src/App.js

В src/components/Users.js,

• Доступ к данным в TestReducer с помощью хука useSelector
• Сопоставление данных для отображения списка пользователей

Получим результат!

Примечание: Существует несколько способов структурировать эту систему, это лишь довольно простой способ быстро приступить к работе. Надеюсь, это поможет вам быстро начать работу :).