【问题标题】:Redux with React-Native and mapStateToPropsRedux 与 React-Native 和 mapStateToProps
【发布时间】:2017-05-17 05:25:48
【问题描述】:

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

它说 props 与 state 不同,理想情况下 props 不应在其组件中更改,而应仅由其父组件更改。

但是,react-redux 中的 mapStateToProps 函数将 Redux 中的状态映射到 React 组件的 props,这基本上是在 Redux 状态被 Redux 操作更改时更改 React 组件的 props。

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

我错过了什么吗?

【问题讨论】:

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


    【解决方案1】:

    它说 props 与 state 不同,理想情况下 props 应该 不改变其组件,只应由其改变 父组件。

    这里的状态是指组件的内部状态,组件内部可以通过.setState()改变状态。

    然而,react-redux 中的 mapStateToProps 函数映射 Redux 中的状态 到 React 组件的 props,这基本上是在改变一个组件的 props 当 Redux 状态被 Redux action 改变时 React 组件。

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

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

    所以 HOC 是父组件,而哑组件是子组件。父组件向子组件注入新的 props,不违反第一个断言“props 不应在其组件中更改,只能由其父组件更改”。


    注意事项:

    1. 有关高阶组件的更多信息可以在 Dan Abramov 关于Presentational and Container Components 的文章中找到。

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

    【讨论】:

    • 感谢您提及 HOC。似乎connect 方法创建了一个 HOC,它是一个包装器(或父组件),它改变了子组件(或正在连接的组件)的道具。这说得通!我理解正确吗?
    • 确实如此 :) 如果您想深入了解一下 - 在在线免费课程中,Getting Started with Redux,Dan Abramov 从头开始​​构建连接(第 22-29 课)。
    【解决方案2】:
    1. state here in mapStateToProps 表示 state in ReduxStore。

    2. 它将Redux state 映射到ReactComponent props。不一定要将道具映射到状态,例如Pure Component

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-11-07
        • 2018-02-26
        • 1970-01-01
        • 2017-11-28
        • 2018-02-03
        • 2020-02-16
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多