reactjs - 在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 个小组件。我几乎理解了所有内容，但我无法理解一些内容:

• connect 的作用是什么？我知道你必须传递 4 个参数(虽然我无法确切地知道这 4 个变量是什么)。
• @connect装饰器的实现是怎样的，代码转译后会是什么样子？

提前致谢:)

Answer 1

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

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

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

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

这里的连接意味着:您接收商店的状态作为 props，并且当该状态更新时，这个新的连接组件会接收新的 props。连接还意味着您可以访问商店的dispatch 功能，该功能允许您改变商店的状态。

四个参数是:

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

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

的操作

• mergeProps 允许您定义自定义函数来合并组件收到的 props，来自 mapStateToProps 的 props 和来自 mapDispatchToProps 的 props

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