如何使用 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)