Redux with React-Native和mapStateToProps

时间:2017-01-03 07:02:48

标签: javascript reactjs react-native redux react-redux

我已经读过这个帖子了。 What is the difference between state and props in React?

它表示道具与州不同,理想情况下道具不应该在其组件中发生变化,只应由其父组件进行更改。

然而,在Redux中的reflect-redux map中的mapStateToProps函数表示React组件的道具,当Redux动作改变Redux状态时,它基本上改变了React组件的道具。

对我来说没有意义。它似乎应该是mapStateToStates,并将Redux状态映射到React组件的状态。

我错过了什么吗?

3 个答案:

答案 0 :(得分:9)

  

它说道具与州不同,理想道具应该   不得改变其组成部分,只应改变其组成部分   父组件。

此处的状态是指组件的内部状态,组件可以通过.setState()在内部进行更改。

  

然而,在Redux中的react-redux映射状态中的mapStateToProps函数   一个React组件的道具,这基本上改变了一个道具   通过Redux操作更改Redux状态时的React组件。

这里的状态是指redux商店,一个外部状态。 react-redux的connect方法创建了一个HOC - 高阶组件(一个知道商店状态变化的组件)。 HOC包裹了哑反应组件,它不知道商店。使用mapStateToProps HOC映射来自外部状态的数据,并通过道具将其注入反应组件。

在redux商店中的状态 - > HOC中的mapStateToProps - >传递给哑组件的道具

所以HOC是父母,而哑巴部分是孩子。父对子组件注入新的道具,第一个断言的道具不应该在其组件中改变,只应由其父组件改变。没有违反。

注意:

  1. 有关高阶组件的更多信息,请参阅Dan Abramov关于Presentational and Container Components的文章。

  2. 要了解react-redux连接是如何工作的 - 在线免费课程Getting Started with Redux中,Dan Abramov展示了如何从头开始建立连接(第22-29课)

答案 1 :(得分:0)

  1. state mapStateToProps中的state表示ReduxStore中的Redux

  2. 它将state ReactComponent映射到props {{1}}。它不一定要将道具映射到州,例如Pure Component

答案 2 :(得分:0)

mapStateToProps使用react-redux connect()函数将状态作为道具传递给组件。将connect()函数视为包装器组件,它将props传递给子级。

                    mapStateToProps
connect (state) ----------------------->  component(props)