Skip to main content

Начало работы с 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

Затем вам потребуется установить Redux и настроить Redux хранилище (store).

React-Redux v8 разработан на TypeScript, следовательно типизация встроена автоматически.

Обзор API

Provider

React Redux предоставляет компонент <Provider />, который делает 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.

Документация на разных языках

Оригинальная английская документация переведена на русский язык усилиями @mskKote и @shchukin_ve. Если вы хотите поддержать перевод, присоединяйтесь в наш Telegram чат