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, которая содержит следующие папки
- Редукторы
- Сага
Импортируйте библиотеки
В 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 с образцом действия.
Я только что установил один, но вы можете расширить его и использовать в своем проекте. Не стесняйтесь обращаться за помощью в комментариях.