正确使用 react-redux connect [英] Proper use of react-redux connect

问题描述

我是 react-redux 的新手，我正在阅读这里的文档 https://github.com/reactjs/react-redux/blob/master/docs/api.md
文档说 connect 定义为:

<块引用>

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

但后来我看到了这个示例代码

从 'react' 导入 React从'react-redux'导入{连接}从 '../actions' 导入 { getData }class Content 扩展了 React.Component {构造函数(道具){超级(道具)；}componentWillMount() {this.props.dispatch(getData())}使成为() {const { 数据 } = this.props;//这个数据和fungetStore返回的数据是一样的返回 (<div><h1>{ data.text } </h1>

);}}const fungetStore = store =>{返回 {data: store//返回store的内容}}内容 = 连接(fungetStore)(内容)导出默认内容

在代码中可以看到fungetStore是在connect中发送的.但是为什么要这样使用connect呢?不应该你必须定义 mapStateToProps 和/或 mapDispatchToProps?.我遗漏了文档中的某些内容?

解决方案

connect 的参数名称为 mapStateToProps 和 mapDispatchToProps.它们通常被称为 mapState 和 mapDispatch，但您可以随意调用您的函数.

在这个例子中，fungetStore 是一个mapState"函数的例子.不管它是叫mapStateToProps、mapState、fungetStore还是fred，它都是一个接收state 作为参数并作为第一个参数传递给 connect.

此外，connect 的每个参数都是可选的.所有这些都是有效的:

connect(mapState, mapDispatch)(MyComponent)//通过函数使用状态和分派动作connect(mapState)(MyComponent)//使用状态connect(null, mapDispatch)(MyComponent)//通过函数分派动作connect(null, null)(MyComponent)//通过 dispatch() 分派动作connect()(MyComponent)//通过 dispatch() 分派动作

I'm new in react-redux and I was reading the documentation here https://github.com/reactjs/react-redux/blob/master/docs/api.md
The documentation says that connect is defined as:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

But then I see this example code

import React from 'react'
import { connect } from 'react-redux'
import { getData } from '../actions'

class Content extends React.Component {

   constructor(props) {
      super(props);
  }

   componentWillMount() {
      this.props.dispatch(getData())
   }

   render() {
      const { data } = this.props; //This data is the same returned for fungetStore

      return (
         <div>
            <h1> { data.text } </h1>
         </div>
      );
   }
}

const fungetStore = store => {
   return {
      data: store  //Return the content of the store
   }
}

Content = connect(fungetStore)(Content)

export default Content

You can see in the code that the fungetStore is sent in connect. But why connect is used in this way? It's not supposed that you must define mapStateToProps and/or mapDispatchToProps?. There is something in the documentation that I'm missing out?

解决方案

The names of the parameters to connect are mapStateToProps and mapDispatchToProps. They're frequently referred to as mapState and mapDispatch, but you can call your functions anything you want.

In this example, fungetStore is an example of a "mapState" function. It doesn't matter whether it's called mapStateToProps, mapState, fungetStore, or fred, it's a function that receives state as an argument and is being passed as the first parameter to connect.

Also, each of the parameters to connect are optional. All of these are valid:

connect(mapState, mapDispatch)(MyComponent) // use state and dispatch actions via functions
connect(mapState)(MyComponent)              // use state
connect(null, mapDispatch)(MyComponent)     // dispatch actions via functions
connect(null, null)(MyComponent)            // dispatch actions via dispatch()
connect()(MyComponent)                      // dispatch actions via dispatch()

这篇关于正确使用 react-redux connect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！