如何使用 Redux 在组件之间共享状态？答案

【问题标题】：How to share state between components using Redux?如何使用 Redux 在组件之间共享状态？
【发布时间】：2019-12-10 22:20:05
【问题描述】：

我有两个组件，父母和孩子。我想使用 redux 存储子组件的状态，并在父组件或应用程序的任何位置访问它。

有人可以帮我解决这个问题吗？谢谢

【问题讨论】：

就目前而言，这个问题太宽泛了。您应该以minimal reproducible example 的形式添加代码，以便我们能够为您提供帮助。

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

这个问题太宽泛了，但我会告诉你你需要做什么的大致思路。

您需要创建一个 redux 操作，并从子组件内部调度它。传递您要存储的数据。
您需要创建一个 reducer 来处理此操作。它应该接收操作并将数据保存在存储中。它应该返回包含添加数据的状态的新副本。
您需要创建一个使用上面创建的 reducer 的商店。
您将在树中拥有一个 Provider 组件，该组件使用您在上面创建的商店。
在您的父组件中，您可以使用react-redux 中的connect 方法来访问您保存在存储中的数据，使用connect 的mapStateToProps 参数。
李>

请随时就上述任何步骤发布更具体的问题。

阅读有关 redux 和 react-redux 的更多信息：

https://redux.js.org/introduction/core-concepts

https://react-redux.js.org/introduction/quick-start

【讨论】：

【解决方案2】：

以下两个步骤是......

步骤01：使用redux like设置props值

jsx:

<button onClick={()=>this.props.AddProductToCart(this.state.quantity)} className='btn btn-sm btn-success'>Add to Cart</button>

const mapStateToProps=(state)=>({
    quantity:state.CartQtyManageReducer.quantity
})

export default connect(mapStateToProps,{AddProductToCart})(AddToCart)

步骤02：从redux状态获取LayoutNavbar中的props

const mapStateToProps=(state)=>({
    quantity:state.CartQtyManageReducer.quantity
})

export default connect(mapStateToProps,{})(LayoutNavbar)

【讨论】：