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

这是一个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

• 选项很好,一些选项......