13

我正在学习 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如何，转译后的代码会是什么样子？

提前致谢 ：）

4

1 回答 1

32

Redux 将应用程序的状态保存在一个名为 store 的对象中。connect允许您将 React 组件连接到商店的状态，即将商店的状态作为props.

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

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

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

这里的连接意味着：你接收到 store 的状态props，当这个状态被更新时，这个新的连接组件接收新的 props。Connected 还意味着您可以访问 store 的dispatch功能，这允许您改变 store 的状态。

四个论点是：

  • mapStateToProps您可能不想在所有连接的组件中注入所有商店的状态。此函数允许您定义您感兴趣的状态切片，或作为props从商店状态派生的新数据传递。你可以做类似state => ({todosCount: state.todos.length})的事情，Home组件会收到todosCount道具

  • mapDispatchToProps对 dispatch 函数做同样的事情。你可以做类似的事情dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})

  • mergeProps允许您定义一个自定义函数来合并您的组件接收的道具，来自的道具mapStateToProps和来自的道具mapDispatchToProps

  • 选项不错，有些选项……</p>

于 2016-04-11T16:35:37.140 回答