Новый 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";
- useSelector будет использоваться для получения данных из глобального хранилища.
- useDispatch будет использоваться для обновления данных в глобальном хранилище.
Создайте переменную Counter и инициализируйте отправку
const counter = useSelector((state) => state.counter);
const dispatch = useDispatch();
Доступ к значению счетчика
Обновите тег span соответствующим образом.
<span>#{counter.value}</span>
Запись событий кликов
- Кнопка увеличения
<button
aria-label="Increment value"
onClick={() => dispatch(setCounter(counter.value + 1))}
>
Increment
</button>
- Кнопка уменьшения
<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.
Надеюсь, вам понравился этот краткий урок. Если да, то не забудьте поставить лайк ❤️
