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

Установите эти 3 модуля NPM для подключения React с redux.

$ npm install redux redux-thunk react-redux --save

redux: - Redux - это контейнер с предсказуемым состоянием для приложений JavaScript. Redux упрощает управление состоянием вашего приложения. С другой стороны, это помогает вам управлять отображаемыми данными и тем, как вы реагируете на действия пользователя.

Мы импортируем функцию createStore и функцию applyMiddleware. Что такое промежуточное ПО? Что ж, это не что иное, как кусок кода, который находится между вашими действиями и вашими редукторами. Он требует, чтобы ваши действия что-то с ним сделали, прежде чем передать его редуктору. Думайте об этом как о посреднике.

Теперь createStore используется для создания хранилища redux, а applyMiddleware будет использоваться для добавления промежуточного программного обеспечения преобразователя. Затем у нас есть оператор импорта из каталога redurs, пока его игнорируем. По сути, это импорт редуктора, который нам понадобится для этого приложения. Здесь имя редуктора asyncReducer. Следующий редукс-преобразователь.

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

redux-thunk: - Redux Thunk - это промежуточное ПО, которое позволяет вам вызывать создателей действий, которые возвращают функцию вместо объекта действия. Эта функция получает метод диспетчеризации хранилища, который затем используется для отправки регулярных синхронных действий внутри тела функции после завершения асинхронных операций. Далее react-redux .

react-redux: - React Redux - это официальная привязка React для Redux. Он позволяет вашим компонентам React считывать данные из хранилища Redux и отправлять в хранилище действия для обновления данных.

Провайдер: -

соединять:-

Структурное дерево магазина

Создайте хранилище папок в src make и 2 другие папки в магазине, одна - действия, другая - редукторы в папке действий, мы напишем связанный с действиями код в папке действий и в редукторах. Папка, связанная с редуктором записи.

СТРУКТУРА: -

src
|____store
| |____actions
| | |____drawerActions.js
| | |____types.js
| |____index.js
| |____reducers
| | |____drawerReducer.js
| | |____index.js

Вот код всех этих файлов: -

Применить магазин ко всем приложениям: -

App.js

import React from "react";
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import HomePage from "../src/Pages/HomePage";
import ContactUs from "./Components/ContactUs"
import AboutUs from "./Components/AboutUs"
import TermsAndConditions from "./Components/TermsAndConditions";
import PrivacyPolicy from "./Components/PrivacyPolicy";
import { Provider } from 'react-redux';
import store from "./store";
const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/ContactUs" component={ContactUs} />
          <Route exact path="/AboutUs" component={AboutUs} />
          <Route exact path="/terms.html" component={TermsAndConditions} />
          <Route exact path="/privacy.html" component={PrivacyPolicy} />
          <Route path='*' render={() => <Redirect to={{ pathname: "/" }} />} />
        </Switch>
      </Router>
    </Provider>
  );
};

Не стесняйтесь задавать любые вопросы или запросы в разделе комментариев или можете связаться со мной на Facebook.