Как быстро использовать Redux в проекте React

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

Я упростил шаги до следующего:

шаг 1. createStore
шаг 2. createReducer
шаг 3. CombineReducers
шаг 4. создатель действия
шаг 5. useDispatch, useSelector

давайте начнем с шагов:

шаг 1. создать магазин

Это индексный слой компонента React:

import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<App />
);

Сначала добавьте следующие две строки:

import { createStore } from "redux";
const store = createStore();

Код становится:

import { createRoot } from "react-dom/client";
import { createStore } from "redux";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const store = createStore();

root.render(
<App />
);

Затем оберните все приложение с помощью Provider:

import { Provider } from "react-redux";

...

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

шаг 2. создатьредуктор

Создайте файл, например, todoReducer.js:

const initialState = {
  todos: []
};

function todoReducer(state = initialState, action) {
  console.log(action);
  switch (action.type) {
    case "ADD_TODO": {
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      };
    }
    default:
      return state;
  }
}

export default todoReducer;

Шаг 3. Комбинируйте редукторы

Вернемся к index.js:

import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
//combineReducers
import { createStore, combineReducers } from "redux";
//The reducer to combine
import todoReducer from "./todoReducer";


import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
//Combine the reducers
const rootReducer = combineReducers({
  todos: todoReducer
});

//Pass rootReducer as a parameter
const store = createStore(rootReducer);

root.render(
<Provider store={store}>
<App />
</Provider>
);

Примечание: некоторые люди предпочитают создавать отдельный файл для комбинированной функции и импортировать его.

шаг 4. создатель действия

Тип функции действия соответствует случаю переключения в редукторе:

export function addTodo(text) {
  return {
    type: "ADD_TODO",
    text
  };
}

шаг 5. useDispatch, useSelector

В местах, где вам нужно получить данные, используйте useSelector. В местах, где вам нужно обновить данные, используйте useDispatch и не забудьте импортировать действие при использовании dispatch.

После отправки () вы увидите значение действия в редюсере.

import { useDispatch, useSelector } from "react-redux";
import { addTodo } from "./actions";

import "./styles.css";

export default function App() {
//todos corresponds to the key in your createStore()
  const todos = useSelector((state) => state.todos);
//useDispatch
  const dispatch = useDispatch();

  console.log(todos);

  let input;
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (!input.value.trim()) {
              return;
            }
            dispatch(addTodo(input.value));
            input.value = "";
          }}
        >
          <input
            ref={(node) => {
              input = node;
            }}
          />
          <button type="submit">Add Todo</button>
        </form>
        <ul>
          {todos.todos.map((todo, index) => (
            <li key={index}>{todo.text}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

примечание: параметр отправки должен быть простым объектом!