在react-redux中@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>
    );
  }
}

这是一个待办事项应用程序，这是主页，它加载了另外 2 个小页面components。我几乎明白了一切，但我无法明白一些事情：

• 什么是connect做？我知道你必须传递 4 个参数（虽然我无法确切地知道这 4 个变量是什么）。
• 实施情况如何@connect装饰器，代码转译后会是什么样子？

提前致谢 ：）

Redux 将应用程序的状态保存在一个称为 store 的对象中。connect允许您将 React 组件连接到商店的状态，即将商店的状态传递给它们props.

如果没有装饰器语法，您的组件的导出将如下所示

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

它的作用是它需要你的组件（这里Home）并返回一个正确连接到您的商店的新组件。

此处连接意味着：您收到的商店状态为props，当这个状态更新时，这个新的连接组件会收到新的 props。连接还意味着您可以访问商店的dispatch函数，它允许您改变商店的状态。

这四个论点是：

• 映射状态到属性您可能不想将商店的所有状态注入所有连接的组件中。此函数允许您定义您感兴趣的状态切片，或作为传递props来自商店状态的新数据。你可以做类似的事情state => ({todosCount: state.todos.length})和Home组件将收到todosCount prop

• 映射调度到属性对调度函数做同样的事情。你可以做类似的事情dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})

• 合并属性允许您定义一个自定义函数来合并您的组件接收的道具，这些道具来自mapStateToProps以及那些来自mapDispatchToProps

• options好吧，一些选择……