Урок #2 — Установка Redux
В уроке мы создадим рабочий проект, а также установим Redux для работы с ним в дальнейшем. Процесс установки Redux не самый быстрый, поэтому рассмотрим его поэтапно.
Видеоурок
Полезные ссылки:
-
Скачать папку со всеми материалами ;
Официальный сайт NodeJS ;
Инструкция по установке WebPack .
Для запуска Redux необходимо скачать готовую папку с файлами. В папке прописан файл «package.json», что содержит все необходимые зависимости для корректной работы проекта.
Чтобы установить все зависимости пропишите команду npm install , а для запуска веб сервера пропишите команду npm run start .
Начало работы с React Redux
React Redux — это официальная библиотека для React, связывающая UI и Redux. Это позволяет вашим React компонентам читать данные из Redux «хранилища» (store) и «отправлять» (dispatch) «действия» (actions) в хранилище для обновления «состояния» (state).
Установка
React Redux 8.x требует React 16.8.3 или выше / React Native 0.59 или выше для использования с React хуками.
Create React App
Рекомендуемый путь для создания новых React приложений с Redux — использовать официальный шаблон Redux+JS или Redux+TS для Create React App. Шаблоны используют Redux Toolkit и содержат пример интеграции React Redux в React компонентах.
# Шаблон Redux на JS npx create-react-app my-app --template redux # Шаблон Redux на TypeScript npx create-react-app my-app --template redux-typescript Внедрение React Redux в существующее React приложение
Для использования React Redux в вашем приложении установите зависимость:
# Если вы используете npm: npm install react-redux # или если вы используете Yarn: yarn add react-redux React-Redux v8 разработан на TypeScript, следовательно типизация встроена автоматически.
Обзор API
Provider
React Redux предоставляет компонент , который делает Redux хранилище (store) доступным всему приложению.
import React from 'react' import ReactDOM from 'react-dom/client' import Provider > from 'react-redux' import store from './store' import App from './App' // React 18 const root = ReactDOM.createRoot(document.getElementById('root')) root.render( Provider store=store>> App /> Provider> ) Хуки
React Redux предоставляет пару React хуков для взаимодействия с Redux хранилищем (store) из ваших компонентов.
Хук useSelector читает значение из состояния (state) хранилища (store) и подписывается на обновление состояния (state). И хук useDispatch , возвращающий метод dispatch , для отправки сообщений в хранилище (store).
import React from 'react' import useSelector, useDispatch > from 'react-redux' import decrement, increment, incrementByAmount, incrementAsync, selectCount, > from './counterSlice' import styles from './Counter.module.css' export function Counter() const count = useSelector(selectCount) const dispatch = useDispatch() return ( div> div className=styles.row>> button className=styles.button> aria-label="Увеличить значение" onClick=() => dispatch(increment())> > + button> span className=styles.value>>count>span> button className=styles.button> aria-label="Уменьшить значение" onClick=() => dispatch(decrement())> > - button> div> div> ) > Изучение React Redux
Запись трансляции «узнай современный Redux»
Разработчик Redux Марк Эриксон появился на шоу «Learn with Jason», чтобы объяснить, как рекомендуется использовать Redux сегодня. Запись включает в себя разработку React приложения на Typescript с Redux Toolkit, Redux-Redux хуками и новым инструментом для отправки и обработки запросов, RTK Query.
Посмотрите заметки шоу для транскрипции и ссылки на код приложения.
Помощь и дискуссия
Канал #redux в Discord от сообщества Reactiflux — это наш официальный ресурс для всех вопросов касательно изучения и использования Redux. Reactiflux — отличное место, где можно пообщаться, задать вопросы и узнать что-то новое — присоединяйтесь к нам! Вы также можете задать вопросы на Stack Overflow, используя тег #redux.
Документация на разных языках
- English — оригинальная документация
- Português
Оригинальная английская документация переведена на русский язык усилиями @mskKote и @shchukin_ve. Если вы хотите поддержать перевод, присоединяйтесь в наш Telegram чат
Быстрый старт с React Redux
Добро пожаловать в начальное руководство по React Redux! Это руководство вкратце представит вам React Redux и обучит использовать его корректно.
Как читать это руководство?
Эта страница будет акцентировать внимание только на первичную установку приложения с Redux и Redux Toolkit, а также познакомит с главными API, которые вы будете использовать. Для понимания работы Redux и изучения полных примеров использования Redux Toolkit, посмотрите руководства в документации самого Redux.
В этом руководстве мы предположим, что вы используете Redux Toolkit и React Redux вместе, в качестве стандартного шаблона использования Redux. В примерах используется типичная структура папок, созданная Create-React-App, где весь код приложения хранится в папке src . Как бы то ни было, описанные паттерны могут быть адаптированы для любого проекта и файловой структуры, которую вы используете.
Резюме
Установите Redux Toolkit и React Redux
Добавьте пакеты Redux Toolkit и React Redux в ваш проект:
npm install @reduxjs/toolkit react-redux Создайте Redux хранилище(store)
Добавьте файл src/app/store.js . Импортируйте configureStore API из Redux Toolkit. Сначала мы создадим пустое Redux хранилище(store) и экспортируем его:
app/store.js
import configureStore > from '@reduxjs/toolkit' export default configureStore( reducer: >, >) Это создаст Redux хранилище(store) и автоматически настроит Redux DevTools расширение, таким образом вы сможете просматривать содержимое хранилища(store) во время разработки.
Обозначим Redux хранилище(store) в React
Единожды создаётся Redux хранилище(store), которое мы делаем доступным во всех React компонентах, обернув приложение в React Redux в файле src/index.js . Импортируйте созданное на предыдущем шаге Redux хранилище(store) и оберните ваше приложение в , которому необходимо предоставить в пропс store наше Redux хранилище(store):
import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import App from './App' import store from './app/store' import Provider > from 'react-redux' // React 18 const root = ReactDOM.createRoot(document.getElementById('root')) root.render( Provider store=store>> App /> /Provider> ) Создайте «срез» (часть хранилища/slice) Redux хранилища(store)
Добавьте новый файл src/features/counter/counterSlice.js . В этом файле импортируйте createSlice API из Redux Toolkit.
Создание среза Redux хранилища(store) требует строковое имя, с которым будет ассоциирован этот срез, изначальное состояние и 1 или больше функций редюсеров(reducer) для определения, как состояние может быть изменено. После создания среза мы можем экспортировать сгенерированные действия(action creators) и функции редюсеры(reducer) для этого среза.
features/counter/counterSlice.js
import createSlice > from '@reduxjs/toolkit' export const counterSlice = createSlice( name: 'counter', initialState: value: 0, >, reducers: increment: (state) => // Redux Toolkit позволяет нам писать "мутабельную" логику в reducer'ах. // Это не изменяет состояние(state) напрямую, потому что внутри используется библиотека Immer, // которая следит за изменениями в "черновом state" и создает новое // неизменное состояние на основе этих изменений state.value += 1 >, decrement: (state) => state.value -= 1 >, incrementByAmount: (state, action) => state.value += action.payload >, >, >) // Функция действия генерируется на каждую функцию релюсера(reducer), определённую в createSlice export const increment, decrement, incrementByAmount > = counterSlice.actions export default counterSlice.reducer Добавляем редюсер(reducer) функции созданного среза в Redux хранилище(store) приложения
Далее, нам нужно импортировать функцию редюсера(reducer) из среза для счётчика и добавить их в наше хранилище(store). Определением поля в параметре reducers мы говорим хранилищу(store) использовать функцию редюсера(reducer) из среза для обработки изменений этого состояния.
app/store.js
import configureStore > from '@reduxjs/toolkit' import counterReducer from '../features/counter/counterSlice' export default configureStore( reducer: counter: counterReducer, >, >) Использование состояния из Redux хранилища(store) и действий в компонентах React
Теперь мы можем использовать хуки из React Redux, чтобы позволить React компонентам взаимодействовать с Redux хранилищем(store). Мы можем читать состояние из хранилища(store) при помощи хука useSelector и вызывать действия, используя useDispatch . Создайте файл src/features/counter/Counter.js с компонентом , затем импортируйте этот компонент в App.js и поставьте его внутрь .
features/counter/Counter.js
import React from 'react' import useSelector, useDispatch > from 'react-redux' import decrement, increment > from './counterSlice' import styles from './Counter.module.css' export function Counter() const count = useSelector((state) => state.counter.value) const dispatch = useDispatch() return ( div> div> button aria-label="Увеличить значение" onClick=() => dispatch(increment())> > Увеличить button> span>count>span> button aria-label="Уменьшить значение" onClick=() => dispatch(decrement())> > Уменьшить button> div> div> ) > Теперь в любое время вы можете нажать на кнопки «Увеличить» и «Уменьшить»:
- Соответствующее Redux действие будет отправляться в хранилище(store)
- Reducer среза счётчика будет видеть действия и обновлять нужную часть состояния
- Компонент будет получать новое состояние из хранилища(store) и перерисовываться с новыми данными —>
Чему вы научились
Это был краткий осмотр того, как установить и использовать Redux Toolkit с React. Подводя итоги:
- Создайте Redux хранилище(store) с configureStore
- configureStore принимает функции reducer как именнованный аргумент
- configureStore автоматически устанавливает хранилище(store) со значениями по умолчанию
- Оберните ваш в компонент из React Redux
- Передайте Redux хранилище(store) >
- Вызовите createSlice со строковым именем среза, начальное значение и поимённо функции редюсеров (reducer)
- Функции редюсеров(Reducer) могут «мутировать» состояние, т.к. внутри использует библиотека Immer
- Экспортируйте созданный редюсер(reducer) среза и его действия
- Читайте данные из хранилища(store) с помощью хука useSelector
- Получите функцию dispatch с хуком useDispatch , и вызовите её с определённым действием для изменения состояния
Полный пример приложения со счётчиком
Пример приложения счётчика также представлен здесь
Вот полное приложение счетчика в виде запущенной CodeSandbox:
Что дальше?
Мы рекомендуем пройти руководства «Redux Essentials» и «Redux Fundamentals» из документации самого Redux. Они дадут вам полное понимание работы Redux, что назначение Redux Toolkit и React Redux, а также способ их корректного использования.
Installation
Redux Toolkit includes the Redux core, as well as other key packages we feel are essential for building Redux applications (such as Redux Thunk and Reselect).
It’s available as a package on NPM for use with a module bundler or in a Node application:
# NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkitThe package includes a precompiled ESM build that can be used as a tag directly in the browser.
Complementary Packages
React-Redux
npm install react-reduxNote that unlike Redux itself, many packages in the Redux ecosystem don’t provide UMD builds, so we recommend using module bundlers like Vite and Webpack for the most comfortable development experience.
Redux DevTools Extension
Redux Toolkit’s configureStore automatically sets up integration with the Redux DevTools. You’ll want to install the browser extensions to view the store state and actions:
- Redux DevTools Extension:
- Redux DevTools Extension for Chrome
- Redux DevTools Extension for Firefox
If you’re using React, you’ll want the React DevTools extension as well:
- React DevTools Extension:
- React DevTools Extension for Chrome
- React DevTools Extension for Firefox
Create a React Redux App
The recommended way to start new apps with React and Redux is by using our official Redux+TS template for Vite, or by creating a new Next.js project using Next’s with-redux template.
Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit’s features.
# Vite with our Redux+TS template # (using the `degit` tool to clone and extract the template) npx degit reduxjs/redux-templates/packages/vite-template-redux my-app # Next.js using the `with-redux` template npx create-next-app --example with-redux my-appWe do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:
- https://github.com/rahsheen/react-native-template-redux-typescript
- https://github.com/rahsheen/expo-template-redux-typescript
Redux Core
To install the redux core package by itself:
# NPM npm install redux # Yarn yarn add reduxIf you’re not using a bundler, you can access these files on unpkg, download them, or point your package manager to them.