React JS стал лучшим выбором для создания современных динамических веб-приложений. Одним из важнейших аспектов React является управление состоянием, которое может быть довольно сложным по мере роста размера и сложности приложения. Redux — это популярная библиотека управления состоянием, которая упрощает обработку и поддержку состояния приложения. В этом уроке мы проведем вас через создание собственной упрощенной версии Redux с нуля, что поможет вам лучше понять, как это работает.
Оглавление:
- Понимание основ Redux
- Настройка проекта React
- Создание магазина
- Реализация действий
- Строительные редукторы
- Подключение компонентов React к магазину
- Последние мысли
Понимание основ Redux
Redux — это контейнер предсказуемого состояния для приложений JavaScript, что означает, что он помогает вам управлять и поддерживать состояние вашего приложения предсказуемым образом. Основные концепции Redux:
- Хранилище: Хранилище хранит состояние приложения и позволяет компонентам получать к нему доступ.
- Действия. Действия — это простые объекты JavaScript, описывающие, что произошло в приложении.
- Редюсеры: редукторы — это чистые функции, которые принимают текущее состояние и действие и возвращают следующее состояние.
Настройка проекта React:
Для начала создайте новый проект React с помощью Create React App:
npx create-react-app my-redux-app cd my-redux-app
После настройки проекта установите необходимые зависимости:
npm install - save react-redux
Создание магазина:
Магазин отвечает за управление состоянием вашего приложения. Чтобы создать простое хранилище, добавьте следующий код в новый файл с именем store.js:
const createStore = (reducer) => {
let state;
let listeners = [];
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach((listener) => listener());
};
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter((l) => l !== listener);
};
};
dispatch({});
return { getState, dispatch, subscribe };
};
export default createStore;
Выполнение действий:
Действия используются для связи с хранилищем и инициирования изменений состояния. Чтобы создать действия, добавьте новый файл с именем actions.js со следующим кодом:
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const increment = () => ({
type: INCREMENT,
});
export const decrement = () => ({
type: DECREMENT,
});
Создание редукторов:
Редьюсеры — это чистые функции, которые обрабатывают переходы состояний на основе отправленных действий. Создайте новый файл с именем reducers.js и добавьте следующий код:
import { INCREMENT, DECREMENT } from './actions';
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;
Подключение компонентов React к магазину:
Теперь пришло время подключить хранилище к компонентам React. Начните с импорта и инициализации хранилища в файле index.js:
import { createStore } from './store';
import rootReducer from './reducers';
const store = createStore(rootReducer);
Создайте простой компонент счетчика в новом файле с именем Counter.js:
import { increment, decrement } from './actions';
const Counter = ({ count, onIncrement, onDecrement }) => (
<div>
<h1>{count}</h1>
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
</div>
);
export default Counter;
Теперь обновите файл App.js, включив в него компонент Counter, и подключите его к хранилищу:
import React, { useEffect } from 'react';
import { createStore } from './store';
import rootReducer from './reducers';
import Counter from './Counter';
import { increment, decrement } from './actions';
const store = createStore(rootReducer);
const App = () => {
const [state, setState] = React.useState(store.getState());
useEffect(() => {
const unsubscribe = store.subscribe(() => {
setState(store.getState());
});
return () => {
unsubscribe();
};
}, []);
const handleIncrement = () => {
store.dispatch(increment());
};
const handleDecrement = () => {
store.dispatch(decrement());
};
return (
<div>
<Counter
count={state.count}
onIncrement={handleIncrement}
onDecrement={handleDecrement}
/>
</div>
);
};
export default App;
Заключительные мысли:
Теперь вы успешно создали собственную упрощенную версию Redux в приложении React JS. Это упражнение должно помочь вам понять основные концепции Redux и то, как он работает с React для управления состоянием вашего приложения. Хотя эта базовая реализация хорошо работает для небольших проектов, вам следует рассмотреть возможность использования официальной библиотеки Redux для более крупных и сложных приложений. Официальная библиотека поставляется с более продвинутыми функциями, поддержкой промежуточного программного обеспечения и оптимизацией производительности, что делает ее идеальной для создания масштабируемых и удобных в сопровождении веб-приложений.
Продолжая работать с React и Redux, вы также можете изучить дополнительные библиотеки и инструменты, которые могут улучшить ваш рабочий процесс и архитектуру приложения. Некоторые популярные варианты включают в себя:
- Redux Toolkit: набор утилит и рекомендаций для более эффективного и организованного управления состоянием Redux.
- Redux Thunk: промежуточное ПО для обработки асинхронных действий в Redux, позволяющее отправлять функции, которые могут выполнять побочные эффекты или отправлять другие действия.
- Redux Saga: еще одно промежуточное ПО для управления побочными эффектами в Redux, использующее функции генератора, чтобы сделать асинхронный код более читабельным и простым для тестирования.
- Reselect: библиотека для создания эффективных и составных селекторов для вычисления производных данных из хранилища Redux.
Поняв основные принципы Redux и изучив различные доступные инструменты и библиотеки, вы будете хорошо подготовлены для решения сложных задач управления состоянием в своих приложениях React. Удачного кодирования!
