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

小编典典

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

reactjs

我正在学习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装饰器的实现方式如何，代码在编译后的外观如何？

提前致谢：）

阅读 324

2020-07-22

共1个答案

小编典典

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

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

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

它的作用是接收您的组件（在此处Home）并返回正确连接到商店的新组件。

在此处连接表示：您将以的形式接收商店的状态props，并且在更新此状态时，此新连接的组件将接收新的道具。连接也意味着您可以访问商店的dispatch功能，从而可以更改商店的状态。

四个参数是：

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

2020-07-22