[英]What is the use of @connect decorator in react-redux
I am learning React and following a few tutorials, I came across this code: 我正在学习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>
);
}
}
This is a todo application and this is the main page, it loads 2 more small components
. 这是一个待办事项应用程序,这是主页,它加载了2个其他小组
components
。 I understood almost everything but I couldn't get few things: 我几乎了解所有内容,但我却一无所获:
connect
do? connect
什么作用? I know you have to pass 4 params(I couldn't exactly get what are those 4 variables though). @connect
decorator, how the code will look like after transpiling? @connect
装饰器的实现方式如何,代码在编译后的外观如何? Thanks in advance :) 提前致谢 :)
Redux keeps your application's state in a single object called the store. Redux将应用程序的状态保存在一个称为store的对象中。
connect
allows you to connect your React components to your store's state, that is to pass down to them your store's state as props
. connect
允许您将React组件连接到商店的状态,也就是将它们作为props
传递给商店的状态。
Without the decorator syntax, your component's export would look like 如果没有装饰器语法,则组件的导出看起来像
export default connect(state => ({todos: state.todos}))(Home);
What it does is that it takes your component (here Home
) and returns a new component that is properly connected to your store. 它的作用是将您的组件(在此为
Home
)并返回一个已正确连接到商店的新组件。
Connected here means : you receive the store's state as props
, and when this state is updated, this new connected component receives the new props. 在此处连接意味着:您将以
props
接收商店的状态,并且在更新此状态时,此新连接的组件将接收新的props。 Connected also mean that you have access to the store's dispatch
function, which allows you to mutate the store's state. Connected也意味着您可以访问商店的
dispatch
功能,该功能使您可以改变商店的状态。
The four arguments are : 四个参数是:
mapStateToProps you probably don't want to inject all your store's state in all your connected components. mapStateToProps您可能不想在所有连接的组件中注入商店的所有状态。 This function allows you to define which state slices you're interested in, or to pass as
props
new data derived from the store's state. 此功能使您可以定义您感兴趣的状态切片,或作为
props
传递从商店的状态派生的新数据。 You could do something like state => ({todosCount: state.todos.length})
and the Home
component would receive the todosCount
prop 您可以执行类似于
state => ({todosCount: state.todos.length})
,并且Home
组件将收到todosCount
道具
mapDispatchToProps does the same thing for the dispatch function. mapDispatchToProps对调度功能执行相同的操作。 You could do something like
dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})
您可以执行类似
dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})
mergeProps allows you to define a custom function to merge the props your component receives, the ones coming from mapStateToProps
and the ones coming from mapDispatchToProps
mergeProps允许您定义一个自定义函数来合并组件接收的道具,这些道具来自
mapStateToProps
和来自mapDispatchToProps
options well, some options… 选项不错,有些选项...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.