Зачем нужны mapStateToProps и mapDispatchToProps в Redux и в чём между ними разница?

Question

Accepted Answer

## Назначение и функция

**`mapStateToProps()`** подключает состояние Redux store к пропсам твоего компонента, позволяя компоненту *читать* состояние приложения. **`mapDispatchToProps()`** подключает диспетчеры действий к пропсам твоего компонента, позволяя компоненту *изменять* состояние приложения.

## mapStateToProps() - Чтение состояния

`mapStateToProps()` извлекает нужные данные из состояния и передаёт их как пропсы в твой подключённый компонент:

```javascript
const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}
```

Эта функция получает всё состояние Redux и возвращает объект, содержащий только те части состояния, которые нужны твоему компоненту.

## mapDispatchToProps() - Диспетчеризация действий

`mapDispatchToProps()` оборачивает генераторы экшенов в вызовы dispatch и передаёт их как пропсы в твой компонент:

```javascript
const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => dispatch(toggleTodo(id))
  }
}
```

Это позволяет твоему компоненту вызывать экшены без прямого обращения к `dispatch()`.

## Лучшая практика: сокращённая форма объекта

Redux рекомендует использовать **сокращённую форму объекта** для `mapDispatchToProps()`:

```javascript
const mapDispatchToProps = {
  onTodoClick: toggleTodo
}
```

Redux автоматически оборачивает каждый генератор экшенов в вызов `dispatch()`, что сокращает количество кода и улучшает читаемость.

## Ключевые различия

- **`mapStateToProps()`**: Связывает состояние Redux → пропсы компонента (только чтение)
- **`mapDispatchToProps()`**: Связывает генераторы экшенов → пропсы компонента (запись)
- Оба используются с `connect()` для создания **подключённых компонентов**, которые интегрируются с Redux

Зачем нужны mapStateToProps и mapDispatchToProps в Redux и в чём между ними разница?

Ответ

Назначение и функция

mapStateToProps() - Чтение состояния

mapDispatchToProps() - Диспетчеризация действий

Лучшая практика: сокращённая форма объекта

Ключевые различия

Проверочные вопросы

Помогите улучшить этот вопрос

Обсуждение