在Redux存儲中存儲功能的替代方法是什么

Question

問題

我有這樣的結構：

<MenuBar />
<NavigationBar>
  <irrelevant stuff here />
  <ActionButton />
</NavigationBar>
<Router>
  <Route ...>
</Router>

而且我希望NavigationBar中的ActionButton根據路由器（標准ReactRouter路由器）呈現的路由做出不同的操作

最初的想法

我的第一個想法是將一個函數保存在商店中，並使用mapStateToProps和connect ，將該函數作為道具發送給mapStateToProps 。 每當回調發生變化時，我都會調度一個功能為有效載荷的動作。

我很確定這應該可行，但是我知道在商店中存儲不可出售的東西會帶來負面影響。 特別是，它給存儲內容的持久化和重新補充水分以及干擾時間旅行調試帶來了問題。 文檔中的此鏈接對此進行了討論，並引用了討論該問題的一些GitHub問題。 這個StackOverflow問題也討論了這個問題。

題

我見過很多人說“你不應該這樣做”的地方，但是我還沒有看到在商店中存儲函數的替代方法。 我可以想到的替代方法是使用道具鑽孔，但是我真的很想避免這種模式。

在這一點上，我真的不需要持久化或重新存儲商店，並且進行時間旅行調試非常好，但不是必須的。 但是，如果有不錯的選擇，我想避免犧牲這些東西。

提前致謝！ :)

Answer 1

幾個選項：

• 使用中間件偵聽"ACTION_BUTTON_CLICKED"動作，並根據其他值（存儲狀態，路線等）運行不同的邏輯。 這可以是您自己編寫的自定義中間件，也可以是通用副作用中間件，例如redux-saga或redux-observable ，可讓您響應已調度的操作。
• 根據其他行為將預定義的動作放入存儲中，並在單擊按鈕時調度該動作。

在我的實踐Redux，第10部分：管理模態和上下文菜單中，展示了預定義操作方法的示例。

Answer 2

您可以將react-router的狀態放入您的redux存儲中。 然后，當導航狀態更改時，您可以從NavigationBar或ActionButton內訪問當前路線。

您可以存儲邏輯，以根據ActionButton或NavigationBar中的路線來確定按鈕的作用。