我正在学习 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 个小组件
。我几乎理解了所有内容,但我无法理解一些内容:
connect
的作用是什么?我知道你必须传递 4 个参数(虽然我无法确切地知道这 4 个变量是什么)。@connect
装饰器的实现是怎样的,代码转译后会是什么样子?
提前致谢:)
最佳答案
Redux 将应用程序的状态保存在称为存储的单个对象中。 connect
允许您将 React 组件连接到商店的状态,即将商店的状态作为 props
传递给它们。
如果没有装饰器语法,您的组件的导出将如下所示
export default connect(state => ({todos: state.todos}))(Home);
它的作用是获取您的组件(此处为 Home
)并返回一个正确连接到您的商店的新组件。
这里的连接意味着:您接收商店的状态作为 props
,并且当该状态更新时,这个新的连接组件会接收新的 props。连接还意味着您可以访问商店的dispatch
功能,该功能允许您改变商店的状态。
四个参数是:
mapStateToProps您可能不想将所有商店的状态注入(inject)所有连接的组件中。此函数允许您定义您感兴趣的状态切片,或将从商店状态派生的新数据作为
props
传递。您可以执行类似state => ({todosCount: state.todos.length})
的操作,并且Home
组件将接收todosCount
propmapDispatchToProps 对调度函数执行相同的操作。您可以执行类似
dispatch => ({markTodoAsCompleted: todoId =>dispatch(markTodoAsCompleted(todoId))})
的操作
mergeProps 允许您定义自定义函数来合并组件收到的 props,来自
mapStateToProps
的 props 和来自mapDispatchToProps 的 props
选项好吧,一些选项......
关于reactjs - 在react-redux中@connect装饰器有什么用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36553814/