Какая польза от декоратора @connect в реакции-редукции

Я изучаю React и следуя нескольким учебникам, я натолкнулся на этот код:

import React                  from 'react';
import TodosView              from 'components/TodosView';
import TodosForm              from 'components/TodosForm';
import { bindActionCreators } from 'redux';
import * as TodoActions       from 'actions/TodoActions';
import { connect }            from 'react-redux';

@connect(state => ({ todos: state.todos }))

export default class Home extends React.Component {
  render() {
    const { todos, dispatch } = this.props;

    return (
      <div id="todo-list">
        <TodosView todos={todos} 
          {...bindActionCreators(TodoActions, dispatch)} />

        <TodosForm
          {...bindActionCreators(TodoActions, dispatch)} />
      </div>
    );
  }
}

Это приложение todo, и это основная страница, он загружает еще 2 components. Я понял почти все, но я не мог получить несколько вещей:

  • Что делает connect? Я знаю, что вам нужно передать 4 параметра (я не мог точно определить, каковы эти 4 переменные).
  • Как реализована декорация @connect, как будет выглядеть код после транспиляции?

Заранее спасибо:)

Ответы

Ответ 1

Redux сохраняет состояние вашего приложения в одном объекте, называемом хранилищем. connect позволяет подключать компоненты React к состоянию вашего хранилища, то есть передавать им состояние вашего хранилища как props.

Без синтаксиса декоратора экспорт компонентов будет выглядеть как

export default connect(state => ({todos: state.todos}))(Home);

Что он делает, так это то, что он принимает ваш компонент (здесь Home) и возвращает новый компонент, который правильно подключен к вашему хранилищу.

Подключено здесь означает: вы получаете состояние хранилища как props, и когда это состояние обновляется, этот новый подключенный компонент получает новые реквизиты. Подключено также означает, что у вас есть доступ к функции store dispatch, которая позволяет вам изменять состояние хранилища.

Четыре аргумента:

  • mapStateToProps, вы, вероятно, не хотите вводить все состояние своего хранилища во все ваши подключенные компоненты. Эта функция позволяет вам определить, какие секторы состояния вам интересны, или передать в качестве props новые данные, полученные из состояния хранилища. Вы можете сделать что-то вроде state => ({todosCount: state.todos.length}), а компонент Home получит todosCount prop

  • mapDispatchToProps делает то же самое для функции отправки. Вы могли бы сделать что-то вроде dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})

  • mergeProps позволяет вам определить настраиваемую функцию для объединения реквизитов, получаемых вашим компонентом, те, которые исходят от mapStateToProps и те, которые исходят от mapDispatchToProps

  • опции, некоторые параметры...