Redux, React2023-08-31
理解 Redux 原始碼 (5):從 HOC 到 Hooks,實作 useSelector 與 useDispatch
隨著 React-Redux 版本提升,官方更建議使用 Hooks 的方式,而非過去的 HOC 模式 e.g.`connect`。在本文中,將探討這樣的轉變有什麼好處,以及理解和實作 React-Redux 最重要的 useSelector 和 useDispatch Hooks。
隨著 React-Redux 版本提升,官方更建議使用 Hooks 的方式,而非過去的 HOC 模式 e.g.`connect`。在本文中,將探討這樣的轉變有什麼好處,以及理解和實作 React-Redux 最重要的 useSelector 和 useDispatch Hooks。
在前端世界中,不常見到單獨使用 Redux,而是 React 與 Redux 共同使用,aka React-Redux。因此在本文中,會探討 React-Redux 的核心部分的實踐,主要聚焦於 Provider 元件與 connect 方法。
前兩篇 Redux 原始碼的文章,實作了 createStore 以及 applyMiddleware 等項目,在這篇文章中,將實作負責整合多個 reducers 的 combineReducers,藉此了解 Redux 是如何實踐這件事。
接續上篇 Redux 系列文章,已實作完 createStore 中的 getState、dispatch、subscribe 後,這篇將進階到實作 Redux middleware 相關的功能,如 applyMiddleware 及 createStore 傳入的 enhancer 等。帶著好奇心,更深入探討 Redux 吧。
很好奇 Redux 是如何在程式中實踐狀態統一控管以及單向資料流的概念,於是決定閱讀 Redux 的原始碼,並解實作基礎的 createStore function,會聚焦在 getState、dispatch、subscribe API。