Введение

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

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

Предпосылки

Прежде чем продолжить, убедитесь, что на вашем компьютере установлено следующее:

  1. Node.js и нпм
  2. Создать приложение React (CRA)
  3. Базовое понимание React и Redux

Начнем!

Шаг 1: Настройте новый проект React

Создайте новый проект React с помощью Create React App, выполнив в терминале следующую команду:

npx create-react-app react-redux-demo

Шаг 2: Установите Redux и React-Redux

Перейдите в каталог вашего проекта и установите Redux и React-Redux, используя следующую команду:

cd react-redux-demo
npm install redux react-redux

Шаг 3: Создайте свой магазин Redux

Во-первых, давайте создадим магазин Redux. В папке src создайте новую папку с именем store. Внутри папки store создайте файл с именем index.js. Добавьте следующий код в файл index.js:

import { createStore } from "redux";
import rootReducer from "../reducers";

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

Шаг 4: Создайте простой редуктор

Теперь давайте создадим простой редуктор. В папке src создайте новую папку с именем reducers. Внутри папки reducers создайте файл с именем index.js. Добавьте следующий код в файл index.js:

const initialState = {
  count: 0,
};

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

export default rootReducer;

Шаг 5. Подключите магазин Redux к вашему приложению React.

В папке src откройте файл index.js и импортируйте компонент Provider из react-redux. Оберните свой компонент App компонентом Provider и передайте хранилище Redux в качестве реквизита. Ваш файл index.js должен выглядеть так:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Шаг 6: Используйте хук useSelector для подключения компонентов React к хранилищу Redux.

Теперь, когда ваш магазин Redux подключен к вашему приложению React, вы можете использовать хук useSelector для доступа к состоянию в ваших компонентах. Откройте файл src/App.js и замените его содержимое следующим кодом:

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

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

  return (
    <div className="App">
      <h1>React-Redux and useSelector Demo</h1>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
}

export default App;

В этом примере мы используем хук useSelector для доступа к значению count из нашего хранилища Redux. Мы также используем хук useDispatch для отправки действий по изменению состояния. Когда пользователь нажимает кнопки «Увеличить» или «Уменьшить», действия INCREMENT или DECREMENT отправляются соответственно, обновляя состояние в хранилище Redux.

Заключение

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

React-Redux и хук useSelector упрощают управление состоянием вашего приложения, обеспечивая более предсказуемую и поддерживаемую кодовую базу. Используя эти инструменты, вы можете создавать масштабируемые и эффективные приложения, которые легче понять и поддерживать.

  1. React (официальная документация)
  2. Redux (официальная документация)
  3. React-Redux (официальная документация)

Понравилось читать? Еще не являетесь участником Medium? Вы можете поддержать мою работу напрямую, зарегистрировавшись по моей реферальной ссылке здесь. Это быстро, просто и не требует дополнительных затрат. Спасибо за вашу поддержку!