DevGang
Авторизоваться

Новый Redux просто 🔥

React Redux — это официальная привязка React для Redux. Это позволяет компонентам React считывать данные из хранилища Redux и отправлять действия в хранилище для обновления данных.

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

Давайте напишем простое приложение счетчика

Создаем новое приложение React

$ npx create-react-app learn-redux

Добавьте Redux и Redux Toolkit

$ yarn add @reduxjs/toolkit react-redux

Redux Toolkit - это официальный, самоуверенный, включенный в комплект набор инструментов для эффективной разработки Redux. Он включает в себя наиболее широко используемые дополнения Redux, такие как Redux Thunk для асинхронной логики и Reselect для написания функций селектора, чтобы вы могли использовать их сразу.

Структура каталогов

src
│   App.js
│   index.js
│
└───redux
│   │   store.js
│   │
│   └───counter
│       │   counterSlice.js

Создаем Redux Store

в файле src/redux/store.js

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});

Предоставим Redux Store для React

в файле src/index.js

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

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

Создайте Redux State Slice для счетчика

в файле src/store/counter/counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    setCounter: (state, action) => {
      state.value = action.payload;
    },
  },
});

// Action creators are generated for each case reducer function
export const { setCounter } = counterSlice.actions;

export default counterSlice.reducer;

Добавьте Slice Reducers в Store

в файле src/redux/store.js

import { configureStore } from "@reduxjs/toolkit";
import counter from "./counter/counterSlice";

export default configureStore({
  reducer: {
    counter,
  },
});

Напишем App.js

export default function App() {
  return (
    <div>
      <button aria-label="Increment value">Increment</button>
      <span>#</span>
      <button aria-label="Decrement value">Decrement</button>
    </div>
  );
}

Требования к импорту

import { useSelector, useDispatch } from "react-redux";
import { setCounter } from "./redux/counter/counterSlice";
  1. useSelector будет использоваться для получения данных из глобального хранилища.
  2. useDispatch будет использоваться для обновления данных в глобальном хранилище.

Создайте переменную Counter и инициализируйте отправку

const counter = useSelector((state) => state.counter);

const dispatch = useDispatch();

Доступ к значению счетчика

Обновите тег span соответствующим образом.

<span>#{counter.value}</span>

Запись событий кликов

  1. Кнопка увеличения
<button
  aria-label="Increment value"
  onClick={() => dispatch(setCounter(counter.value + 1))}
>
  Increment
</button>
  1. Кнопка уменьшения
<button
  aria-label="Decrement value"
  onClick={() => dispatch(setCounter(counter.value - 1))}
>
  Decrement
</button>

App.js выглядит так

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setCounter } from "./redux/counter/counterSlice";

export default function App() {
  const counter = useSelector((state) => state.counter);

  const dispatch = useDispatch();

  return (
    <div>
      <button
        aria-label="Increment value"
        onClick={() => dispatch(setCounter(counter.value + 1))}
      >
        Increment
      </button>
      <span>{counter.value}</span>
      <button
        aria-label="Decrement value"
        onClick={() => dispatch(setCounter(counter.value - 1))}
      >
        Decrement
      </button>
    </div>
  );
}

Запустите сервер разработки 🚀

$ yarn start

И, если вы нажмете кнопки счетчика, вы увидите обновленные значения счетчика в пользовательском интерфейсе.

Ура! Вы только что узнали What's new is React Redux.

Надеюсь, вам понравился этот краткий урок. Если да, то не забудьте поставить лайк ❤️

Источник:

#JavaScript #React #Redux
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В подарок 100$ на счет при регистрации

Получить