Redux - самая популярная государственная контейнерная библиотека для интерфейсных приложений. Это помогает вам управлять своим состоянием предсказуемым и простым способом.

Этот пост посвящен настройке Redux в вашем новом / существующем приложении React.

Создать приложение React

Я беру самый популярный шаблон React (create-react-app).

Если вы новичок в React и не знаете, что такое create-react-app, перейдите по ссылке ниже.

npx create-react-app my-app
cd my-app
npm start

Https://reactjs.org/docs/create-a-new-react-app.html

Документация Redux

Вы можете найти официальную документацию Redux по ссылке ниже.

Https://redux.js.org/introduction/getting-started

Вам действительно нужен Redux в React?

Перед внедрением Redux я настоятельно рекомендую вам перейти на этот пост создателя Redux (Дэн Абрамов).

https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

Теперь, если вы уверены, что хотите использовать Redux, приступим.

Предпосылки

Базовые знания JavaScript и React.
Базовые знания create-react-app.

Настроить CRA (приложение create-react-app)

Установите желаемые пакеты

redux - Базовый пакет
react-redux - Пакет для использования функций Redux в соответствии с React

Установите пакеты npm

npm install redux react-redux redux-saga

Структура папки Redux

Создайте папку с именем Redux в src, которая содержит следующие папки

  1. Редукторы
  2. Сага

Импортируйте библиотеки

В index.js включите следующие зависимости

// Redux Library Packages
 import { Provider } from “react-redux”;
 import createSagaMiddleware from ‘redux-saga’;
 import { createStore, applyMiddleware, compose } from “redux”;
 import { logger } from ‘redux-logger’;
 // Custom redux Elements
 import rootReducer from “./redux/reducers/index”;
import rootSaga from “./redux/sagas/index”;

Присоедините поставщика к ПРИЛОЖЕНИЮ

const userReducer = (state, action) =>{
switch (action.type) {
 case “USER_FETCH_REQUESTED”:
 return { …state, response: null, loading: true }
 case “USER_FETCH_SUCCEEDED”:
 return { …state, response: action.response, loading: false }
 default:
 return {
 response: “No Response”
 };
 }
}

Добавьте редукторы

const globalReducer = createStore(
 rootReducer,
 compose( 
 applyMiddleware(sagaMiddleware, logger)
 ));

<Provider /> делает хранилище Redux доступным для любых вложенных компонентов, которые используют ловушку useSelector.

 <Provider >
   <App />
 </Provider>

Присоедините редукторы к поставщикам

<Provider store={globalReducer}>
  <App />
</Provider>

Получите глобальное состояние в своем приложении

import { useSelector } from “react-redux”;
const globalState = useSelector(state => state);

Отправка действия по событию

const getUserData = () => {
 // Get the Data for the User
 dispatch({ type: “USER_FETCH_REQUESTED”})
}

Добавьте вызов API к действию

import { call, put, takeLatest } from ‘redux-saga/effects’

const getRecords = (uid = null) => {
const results = fetch(‘https://jsonplaceholder.typicode.com/todos/1')
 .then(response => response.json()); 
 return results;
}
// worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* fetchUser(action) {
 try {
 const json = yield call(getRecords, 400);
 yield put({type: “USER_FETCH_SUCCEEDED”, response: json});
 } catch (e) {
 yield put({type: “USER_FETCH_FAILED”, message: e.message});
 }
}
function* mySaga() {
 yield takeLatest(“USER_FETCH_REQUESTED”, fetchUser);
}
export default mySaga;

Запустите код и просмотрите действие

Окончательный файл app.js

Ваш последний файл app.js будет выглядеть так.

Запустите код и просмотрите действие

Открытым

localhost:3000/

Рабочий пример

https://react-redux-example.netlify.app/

CodeSandBox

https://codesandbox.io/s/github/tarun-nagpal-github/react-redux-boilerplate

Репозиторий GitHub для этого примера

https://github.com/tarun-nagpal-github/react-redux-boilerplate

Заключение

В этом посте мы выбрали новое приложение React и реализовали Redux с образцом действия.

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