react-redux中@connect装饰器的作用是什么 [英] What is the use of @connect decorator in react-redux

问题描述

我正在学习 React 并遵循一些教程，我遇到了以下代码:

从'react'导入React；从 'components/TodosView' 导入 TodosView；从 'components/TodosForm' 导入 TodosForm；从redux"导入 { bindActionCreators };从 'actions/TodoActions' 导入 * 作为 TodoActions；从'react-redux'导入{连接}；@connect(state => ({ todos: state.todos }))导出默认类 Home 扩展 React.Component {使成为() {const { todos, dispatch } = this.props;返回 (<div id="todo-list"><TodosView todos={todos}{...bindActionCreators(TodoActions, dispatch)}/><TodosForm{...bindActionCreators(TodoActions, dispatch)}/>

);}}

这是一个待办事项应用程序，这是主页面，它加载了另外两个小组件.我几乎什么都懂，但我什么都不懂:

• connect 有什么作用?我知道你必须传递 4 个参数(虽然我无法确切地得到这 4 个变量是什么).
• @connect 装饰器的实现如何，代码转译后是什么样子的?

提前致谢:)

解决方案

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

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

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

它的作用是获取您的组件(此处为 Home)并返回一个正确连接到您的商店的新组件.

Connected 这里的意思是:你以 props 的形式接收 store 的 state，当这个 state 更新时，这个新的 connected 组件接收到新的 props.已连接还意味着您可以访问商店的 dispatch 功能，该功能允许您改变商店的状态.

四个参数是:

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

• ma​​pDispatchToProps 为调度函数做同样的事情.你可以做一些类似 dispatch => 的事情.({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})

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

• 选项好吧，一些选项......

I am learning React and following a few tutorials, I came across this code:

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. I understood almost everything but I couldn't get few things:

• What does connect do? I know you have to pass 4 params(I couldn't exactly get what are those 4 variables though).
• How is the implementation of @connect decorator, how the code will look like after transpiling?

Thanks in advance :)

解决方案

Redux keeps your application's state in a single object called the 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.

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.

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. Connected also mean that you have access to the store's dispatch function, which allows you to mutate the store's state.

The four arguments are :

• mapStateToProps you probably don't want to inject all your store's state in all your connected components. 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. You could do something like state => ({todosCount: state.todos.length}) and the Home component would receive the todosCount prop

• mapDispatchToProps does the same thing for the dispatch function. You could do something like 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

• options well, some options…

这篇关于react-redux中@connect装饰器的作用是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！