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>
    );
  }
}

这是一个todo应用程序，这是主页面，它再加载2个小components。我几乎了解所有事情，但我无法得到一些东西：

connect做什么？我知道你必须通过4个参数（虽然我无法准确得到这4个变量）。
如何实现@connect装饰器，转换后代码的样子如何？

提前致谢：）

Answer 1

Redux将您的应用程序状态保存在一个名为store的对象中。 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的道具
选项以及一些选项......

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

1 个答案: