react-redux 中 @connect 装饰器有什么用

Question

我正在学习 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装饰器的实现如何，代码转译后的样子？

提前致谢:)

Answer 1

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

没有装饰器语法，你的组件的导出看起来像

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

它的作用是获取您的组件（此处为 Home）并返回一个正确连接到您的商店的新组件。

这里的连接意味着：你接收到商店的状态为props，当这个状态被更新时，这个新的连接组件接收到新的道具。 Connected 也意味着您可以访问 store 的 dispatch 函数，该函数允许您改变 store 的状态。

四个参数是：

• ma​​pStateToProps您可能不想在所有连接的组件中注入所有商店的状态。此函数允许您定义您感兴趣的状态切片，或作为props 传递来自商店状态的新数据。您可以执行state => ({todosCount: state.todos.length}) 之类的操作，而Home 组件将收到todosCount 属性

• ma​​pDispatchToProps 对调度函数执行相同的操作。你可以做类似dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})

• mergeProps 允许您定义一个自定义函数来合并组件接收的道具，来自mapStateToProps 的道具和来自mapDispatchToProps 的道具

  李>

• 选项好吧，一些选项……