ReactJS Redux State（全局狀態）+ React.Context（本地狀態）

Question

我是 ReactJS 世界的新手，我需要您對 ReactJS state 的意見。

我開始在全局 state（全局模塊）的應用程序中使用 Redux，它非常適合，因為任何時候我需要 state，我都可以從任何地方調用它。 在 Redux 中，我喜歡保留通知，它們顯示在我應用程序的所有頁面上，我也保留應用程序版本（演示/實時），換句話說，我嘗試保留 Redux（全局狀態）全局值。

在我的應用程序中，我也有頁面，每個頁面都有其特定的 state 和組件。 當客戶端離開頁面時，我不再需要它的 state。 That's why I do not like to keep the state in Redux, because when it leaves the page, the page state is still keeped in Redux. 因此，在這種情況下，將頁面 state 保留在 React.Context（+ React.Reducer）中似乎是正確的。

React.Context 優點：

• 當客戶端離開頁面時，自動刪除 state
• 當客戶端訪問頁面時，state 是干凈的，因為 state 是與組件一起創建的

React.Context 缺點：

• 將 Redux state 和上下文 state 結合起來很復雜
• 兩種類型的 store，意味着需要維護更多的代碼（React.Context 的功能更少）

您如何看待，正如我所解釋的，將 Redux 與 React.Context 一起使用是可以的，它解決了問題還是產生了更多問題？

對不起，我的英語不好。

Answer 1

嘗試管理兩個 state 管理容器可能會變得笨拙，並且出於一致性考慮也不理想。 我個人喜歡 React Hooks + Context，因為我覺得它簡單而干凈。 您應該能夠單獨獲得相同的結果，但是如果您已經使用 Redux 設置了通知系統，那是另一件需要考慮的事情。 此外，當用戶使用componentWillUnmount生命周期方法離開頁面時，您仍然可以使用 Redux 並清除 Redux 存儲。 閱讀它們，那里有很多有用的文檔，以及內容豐富的比較文章——看看你最喜歡哪一個，並認為最適合你的具體情況。

文檔

• React-Hooks: https://reactjs.org/docs/hooks-intro.html
• 反應上下文： https://reactjs.org/docs/context.html
• React-Redux: https://react-redux.js.org/introduction/why-use-react-redux

文章

• https://academind.com/tutorials/reactjs-redux-vs-context-api/
• （傾向於 Context + Hooks）： https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/
• （對 Redux 有意見）： https://blog.softwaremill.com/react-context-api-vs-redux-the-eternal-dichotomy-24639907fc98