Question

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

connect（[mapStateToProps]，[mapDispatchToProps]，[mergeProps]，[options]）

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

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

您可以在代码中看到fungetStore已在connect中发送。但为什么以这种方式使用连接？您不应该定义mapStateToProps和/或mapDispatchToProps？文档中有些东西我错过了吗？

Answer 1

connect的参数名称为mapStateToProps和mapDispatchToProps。它们经常被称为mapState和mapDispatch，但您可以根据需要调用您的函数。

在此示例中，fungetStore是“mapState”函数的示例。它是否被称为mapStateToProps，mapState，fungetStore或fred并不重要，它是一个接收state作为参数并正在传递的函数作为connect的第一个参数。

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

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连接

1 个答案: