Что такое Redux?

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

Простым языком объяснение было бы -

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

Как правило, это зависит от этих 4 шагов, теперь мы рассмотрим каждый шаг и узнаем, что это такое -

  1. Магазин
  2. Редуктор
  3. Подпишитесь
  4. Отправка

Во-первых, нам нужно настроить проект React, мы сделаем это с помощью response-create-app.

npx create-react-app <repo_name>
cd my-app
npm start

Чтобы запустить только что созданное приложение-реакцию, вам нужно сделать npm start.

Чтобы лучше понять, вы можете подписаться на https://github.com/facebook/create-react-app

Теперь вам нужно установить Redux, он доступен на npm, поэтому вы можете просто установить оттуда, используя:

npm install --save redux

И у вас есть готовое приложение для реакции с redux.

Давайте подробно рассмотрим шаги, упомянутые ранее.

1. Создать магазин:

У одного приложения может быть только один магазин. Для создания магазина вам необходимо импортировать createStore из redux.

import {createStore} from “redux”;
const store = createStore(reducer, state);

createStore использует редуктор и состояние (начальное состояние) в качестве параметра и возвращает хранилище со всеми состояниями приложения.

2. Редуктор:

Редуктор - это не что иное, как чистая функция javascript, которая принимает старое состояние и действие в качестве параметра и возвращает новое состояние, основанное на этом конкретном действии. Мы не должны изменять экземпляр состояния мутации, мы должны возвращать новую копию состояния.

const reducer = (state = true, action) => {
if (action.type === "MAKE_IT_FALSE") {
  return false;
}
return state;
};

3. Подпишитесь:

Когда магазин изменяется, срабатывает функция обратного вызова `store.subscribe ()`. И getState используется для возврата всех состояний приложения.

store.subscribe(() => {
console.log(“ hello”, store.getState()); //when state is changing calling this.
});

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

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

4. Отправка:

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

Действие: - это часть информации, которая будет отправлена ​​через ваше приложение в хранилище.

const todo = MAKE_IT_FALSE

store.dispatch({ type: “REACT”, value: “ lets learn react” });

Предлагаю вам пример, который включает в себя все 4 шага, о которых мы узнали выше.

import React from "react";
import { createStore } from "redux"; 
class ReduxStore extends React.Component {  
  render() {
    // Step-2 create reducer (state, action)
    const reducer = (state, action) => {   
      if (action.type === "REACT") {     
        return action.value;   
        }    
      return state;    
    };
    // step-1 create the store (reducer, state)
    const store = createStore(reducer, "JS"); 
 
    // step-3 create subscription
    store.subscribe(() => {
      //when state is changing calling this.
      console.log("-->hello", store.getState());
    });
   
    // step-4 dispatch an action
    store.dispatch({ type: "REACT", value: " lets learn react" });     
    return null; 
  }
}
export { ReduxStore };

Https://gist.github.com/shreyaa1/63f2bf96e4d0f7f6aeb1ebbf687c7e9a

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