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 将应用程序的状态保存在一个称为商店的对象中。 connect 允许您将 React 组件连接到您商店的状态，即将您的商店状态传递给它们 props。

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

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

它的作用是获取您的组件（此处 Home）和 returns 正确连接到您的商店的新组件。

此处已连接意味着：您收到商店的状态 props，并且当此状态更新时，此新连接的组件会收到新的道具。已连接还意味着您可以访问商店的 dispatch 功能，该功能允许您改变商店的状态。

四个参数是：

mapStateToProps 您可能不想在所有连接的组件中注入所有商店的状态。此函数允许您定义您感兴趣的状态切片，或作为 props 从商店状态派生的新数据传递。你可以做类似 state => ({todosCount: state.todos.length}) 这样的事情 Home 组件会收到 todosCount prop
mapDispatchToProps 对调度函数做同样的事情。你可以做类似 dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})
mergeProps 允许您定义一个自定义函数来合并您的组件收到的道具，来自 mapStateToProps 的道具和来自 mapStateToProps 的道具mapDispatchToProps
选项好吧，一些选项…

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

What is the use of @connect decorator in react-redux

reactjs

redux

react-redux