Redux用Provider传递store时为什么子组件收不到props

#1

具体代码是这样的：app.js是入口文件

在app.js中provider包含了子组件Main，接下来是Main的代码：

打印props，是个空的对象，但是app.js可以打印出state。求大神解决

#2

收不到原因有两个，一个是没有传下去，另一个是传下去了操作不当，一般你看connect中是不是拿到了数据树上的数据，console.log( this.props.+你要看的数据 )；看看是否可以打印，如果没有那你看看是不是connect写的不对，如果有值，那就看你本组件是否用的得当。

1 Like
#3

这就涉及到什么是provider，中文意思即提供者。

那它的作用也正如中文描述那样，它是一个组件，来提供store数据。它能够让所有的子组件隔n层去轻易获取到全局的state数据，而不是一层层props去传递。

那provider是怎么做的呢，他也只是一个组件而已，不要想的多么复杂。他只是使用了context去做到这一点的

所以，store只是传递给了Provider组件，作为Provider组件的props，Provider提供了context，Main组件只是Provider的子组件而已。各个子组件想要获取到store中state的数据，只需要connect就行了，connect会从context中get到state全局数据。

另外，你可以安装chrome扩展，React Developer Tools，很清楚查看到各个组件的关系，不用不断的console，如下:

#4

对于需要的关联redux的组件
import { connect } from ‘react-redux’

const mapStateToProps = state => {
return {
selected: state.navigationSelected
}
}

const mapDispatchToProps = dispatch => {
return {
setNavigationSelected: value => dispatch(Action.setNavigationSelected(value)),
setLoading: value => dispatch(Action.setLoading(value))
}
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(Component)

参考：https://cn.redux.js.org/docs/react-redux/api.html#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options