[筆記] React 自製 Provider 的基礎知識

React Hook 的寫法中,用 useContext 和 useReducer 就可以簡易的做出一個 GlobalStateProvider。這邊筆記下一些觀念以及注意事項。
react logo


內容

1. Provider 是一個約定成俗的命名規則,亦即提供某些資料。提供內容的 Provider,常會命名為 <某某ContentProvider>
2. 在 Provider 包裹內的 Component,就可以取得 Provider 的內容
3. 關鍵是搭配 useContext。GlobalStateProvider 常會用來儲存使用者的認證資料、Modal 開關、當前的主題是否為 Dark Mode … 等
4. 若你嘗試修改 createContext 的內容,由於其有 broadcast 的特性,所以一處修改會全部都改

範例程式碼 A

以下程式碼是來自:How To use React Context API with useReducer, useMemo Hooks


範例程式碼 B


參考資料

1. How To use React Context API with useReducer, useMemo Hooks
2. createContext
3. How to manage global state with XState and React

按讚加入粉絲團

延伸閱讀