Redux — это популярная библиотека управления состоянием для приложений JavaScript, обычно используемая с такими фреймворками, как React. Это помогает управлять состоянием приложения предсказуемым и централизованным способом, упрощая анализ и поддержку.
Вот пример того, как вы можете использовать Redux в простом приложении React:
Допустим, у нас есть приложение-счетчик, которое позволяет пользователю увеличивать или уменьшать значение счетчика. Мы будем использовать Redux для управления состоянием счетчика.
Во-первых, давайте настроим наш магазин Redux:
// store.js
импортировать {createStore} из «редукции»;
// Исходное состояние
const initialState = {
counter: 0
};
// Функция редуктора
const counterReducer = (state = initialState, action) =› {
switch (action.type) {
case 'INCREMENT':
return { …state, counter: state.counter + 1 };
case 'DECREMENT':
return { …state, counter: state.counter — 1 };
default:
return state; };
// Создать хранилище Redux
const store = createStore(counterReducer);
экспортировать магазин по умолчанию;
В этом примере мы определяем начальное состояние со свойством counter, установленным на 0. Мы также определяем функцию-редуктор с именем counterReducer, которая обрабатывает обновления состояния на основе различных типов действий. Функция createStore из Redux используется для создания нашего хранилища Redux, передавая counterReducer в качестве аргумента.
Далее давайте создадим наши компоненты React, которые взаимодействуют с хранилищем Redux:
// App.js
импортировать React из «реакции»;
импортировать {useSelector, useDispatch} из «реагировать-редукс»;
const App = () =› {
// Доступ к состоянию счетчика из хранилища Redux
const counter = useSelector(state =› state.counter);
// Доступ к функция отправки из хранилища Redux
const dispatch = useDispatch();
return (
‹div›
‹h1›Counter: {counter}‹/h1›
‹button onClick={() =› dispatch({ type: 'INCREMENT' })}› Увеличение‹/кнопка›
‹кнопка onClick={() =› dispatch({ type: 'DECREMENT' })}›Уменьшение‹/кнопка›
‹/div›
); };
экспортировать приложение по умолчанию;
В этом примере мы используем хуки useSelector и useDispatch из библиотеки react-redux для взаимодействия с хранилищем Redux. Хук useSelector позволяет нам получить доступ к состоянию counter из хранилища Redux, а хук useDispatch дает нам доступ к функции dispatch для отправки действий в хранилище Redux.
Наконец, нам нужно подключить наш магазин Redux к нашему приложению React:
// index.js
импортировать React из 'react';
импортировать ReactDOM из 'react-dom';
импортировать { Provider } из 'react-redux';
импортировать хранилище из './store';
импортировать приложение из './App';
ReactDOM.render(
‹Provider store={store}›
‹App /›
‹/Provider›,
document.getElementById('root')
) ;
В этом примере мы используем компонент Provider из библиотеки react-redux, чтобы обернуть наш компонент App, предоставив хранилище Redux для нашего приложения. Это делает хранилище Redux доступным для всех компонентов в Provider иерархии компонентов.
Теперь, когда пользователь нажимает кнопки «Увеличить» или «Уменьшить» в нашем компоненте App, соответствующие действия будут отправлены в хранилище Redux, а counterReducer будет соответствующим образом обрабатывать обновления состояния. Затем обновленное состояние будет отражено в пользовательском интерфейсе, поскольку доступ к состоянию counter осуществляется из хранилища Redux с помощью хука useSelector.
