JS: Redux (React)

Передача действий

Функция connect() позволяет обходиться без явного вызова dispatch(). Общий принцип работы такой: в файл с компонентом импортируются необходимые действия и передаются вторым параметром в функцию connect().

// components/TasksBox.jsx
import React from 'react';
import { connect } from 'react-redux';
// Импортируем нужные действия
import * as actions from '../actions';

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

// Формируем объект с действиями
const actionCreators = {
  addTask: actions.addTask,
};

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

  render() {
    const { tasks } = this.props;
    // Отрисовываем задачи
    return <div>{/* logic with this.handleAddTask */}</div>;
  }
}

// Передаём действия вторым параметром
export default connect(mapStateToProps, actionCreators)(TasksBox);

Как видите, ничего не надо импортировать, всё есть в props. Технически действия оборачиваются в другие функции таким образом, что интерфейс работы остаётся прежним.


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

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

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

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

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

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

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

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

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

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

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

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

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

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

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

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

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

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

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