React Redux JS: Redux (React)

Переходим к самой ожидаемой части — интеграции Redux с React. Сразу скажу, что дело это не простое и не всегда понятное. Поэтому действовать будем по следующей схеме: я покажу пошагово, как скрестить ежа с ужом без погружения в детали, а в дальнейших уроках мы разберёмся что да как.

Команда Redux создала библиотеку react-redux, которая значительно упрощает привязку Redux к React. Далее мы пройдём все этапы по её подключению к React-проекту.

React Redux

Редьюсеры и действия в этом руководстве не описываются. Их структура не зависит от того, с чем интегрируется Redux.

Провайдер

Провайдер — React-компонент, который делает Redux-контейнер доступным для всего приложения. Он находится на верхнем уровне JSX и "оборачивает" в себя все остальные компоненты.

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux'; // импорт компонента!
import { createStore } from 'redux';
import TasksBox from './components/TasksBox.jsx';
import reducers from './reducers.jsx'

// Контейнер передаётся в провайдер
const store = createStore(reducers);

render(
  <Provider store={store}>
    <TasksBox />
  </Provider>,
  document.getElementById('container'),
);

Провайдер, кроме прочего, выполняет подписку через store.subscribe. Это значит, что больше не придётся беспокоиться об обновлении приложения при изменении данных внутри контейнера.

connect

Пакет react-redux предоставляет функцию connect. Она связывает данные из контейнера со свойствами конкретного компонента.

// components/TasksBox.jsx
import React from 'react';
import { connect } from 'react-redux';

// Эта функция, берет нужные данные из контейнера и отдаёт их компоненту
// Компоненту TasksBox нужны задачи
const mapStateToProps = (state) => {
  const props = {
    tasks: state.tasks,
  }
  return props;
};

class TasksBox extends React.Component {
  render() {
    // Извлекаем задачи из свойств
    const { tasks } = this.props;
    // Отрисовываем задачи
  }
}

// connect соединяет контейнер с текущим компонентом
// Наружу экспортируется компонент, который используется как обычно (пример выше)
export default connect(mapStateToProps)(TasksBox);

Самое главное в этой схеме — функция mapStateToProps. Эта функция принимает на вход состояние из контейнера и должна возвратить объект, свойства которого станут props в подключаемом компоненте (в данном случае <TasksBox>). В тривиальном случае мы всегда можем реализовывать эту функцию так state => state. То есть берём и отдаём в компонент всё состояние. Но делать так не стоит по многим причинам, начиная от полной просадки производительности, заканчивая тем, что появляется сильная зависимость от структуры состояния и лишние данные там, где их не ждут. Более того, всю предварительную обработку данных, подготовленных для вывода, стоит делать именно здесь. В идеале в компоненты должны попадать уже готовые к выводу данные.

dispatch

Функция connect пробрасывает в компонент дополнительные свойства. Самое важное из них - функция dispatch. Эта функция работает точь-в-точь как и store.dispatch. Ей нужно передать действие, что в свою очередь запустит цепочку вызовов до перерисовки. Полный код компонента ниже:

// components/TasksBox.jsx
import React from 'react';
import { connect } from 'react-redux';
import { addTask } from '../actions.jsx';

const mapStateToProps = (state) => {
  const { tasks, newTaskText } = state;
  const props = {
    tasks,
    newTaskText,
  }
  return props;
};

class TasksBox extends React.Component {
  handleAddTask = (e) => {
    e.preventDefault();
    // dispatch!
    const { dispatch, newTaskText } = this.props;
    dispatch(addTask({ text: newTaskText }));
  };

  render() {
    return <div>{/* logic with this.handleAddTask */}</div>;
  }
}

export default connect(mapStateToProps)(TasksBox);

Файловая структура

Имея такое количество сущностей, возникает закономерный вопрос: как их раскладывать в файловой системе. Обычно делают так:

actions/index.js
components/App.jsx
reducers/index.js
index.jsx

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
120
курсов
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия

Фронтенд-разработчик

Разработка фронтенд-компонентов веб-приложений
16 июня 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».