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

Question

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

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

Answer 1

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

• 您将需要创建一个 redux 操作，并从子组件内部调度它。 传递要存储的数据。

• 您将需要创建一个减速器来处理此操作。 它应该接收操作并将数据保存在商店中。 它应该返回包含添加数据的状态的新副本。

• 您将需要创建一个使用您在上面创建的减速器的商店。

• 您将在树中拥有一个Provider组件，它使用您在上面创建的商店。

• 在你的父组件中，你可以使用react-redux的connect方法来访问你保存在 store 中的数据，使用connect的mapStateToProps参数。

随意发布有关上述任何步骤的更具体的问题。

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

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

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

Answer 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 中的道具

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

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