Redux — это библиотека управления состоянием, которая часто используется с React Js.

Redux — это библиотека управления состоянием, которая часто используется с React Js. Он обеспечивает централизованное хранилище состояния приложения и позволяет легко управлять состоянием с помощью действий и редюсеров. В этом руководстве вы поймете, как работает управление состоянием Redux.

Вот простой пример того, как вы можете использовать Redux в приложении React:

Во-первых, вы должны настроить свой магазин и создать начальное состояние:

import { createStore } from 'redux';

const initialState = {
  count: 0,
};

const store = createStore((state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
});

Затем вы должны создать свои действия:

const increment = () => ({
  type: 'INCREMENT',
});

const decrement = () => ({
  type: 'DECREMENT',
});

Наконец, вы должны подключить свой компонент React к хранилищу Redux:

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

function App() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default App;

В этом примере, когда пользователь нажимает кнопку «+» или «-», отправляется действие, которое обновляет состояние в магазине. Затем компонент повторно отображается с обновленным состоянием.

Надеюсь, вы понимаете этот пример Redux.