Redux：reduxjs/toolkit 使用
configureStore
對標准的 Redux 的createStore函數的抽象封裝，包裹createStore，並集成了redux-thunk、Redux DevTools Extension，默認開啟。
傳統的Redux，需要配置reducer、middleware、devTools、enhancers等，使用configureStore直接封裝了這些默認值。
<圖：store/index.js>
createAction
創建一個action，傳入動作類型字符串，返回動作函數。
createAction語法： function createAction(type, prepareAction?)
1，type：Redux中的actionTypes
2，prepareAction：Redux中的actions
<圖: store/modules/actionReducer.js>
createReducer
創建一個reducer，action type 映射到 case reducer 函數中，不用寫switch-case，並集成immer。
Builder提供了三個方法：
1，addCase： 根據action添加一個reducer case的操作。
2，addMatcher： 在調用actions前，使用matcher function過濾
3，addDefaultCase： 默認值，等價於switch的default case;
createSlice
createSlice對actions、Reducer的一個封裝。
<圖: store/modules/counter.js>
createAsyncThunk
內置了redux-thunk 處理異步 , 足夠解決絕大部分的問題. 還有其他中間件比如:redux-saga 、redux-observable。
異步請求處理三種狀態的action :pending\fulfilled\rejected；
這三種狀態的action自動觸發, 防止外部手動調用,則使用屬性 extraReducers , 則不會生成對外的的action creator .
<圖: store/modules/async.js>
補充：extraReducers 還有第二種用法
<圖: store/modules/async.js>
createEntityAdapter
字面意思是創建實體適配器，目的為了生成一組預建的縮減器和選擇器函數，通常用來管理列表數據，內置了常用的數據操作方法。
<圖: store/modules/adapter.js>
補充： UI組件中獲取的數據是 { ids, entities }
-> 必不可少的步驟：在根組件用 Provider 包裝，使得所有子組件都能與store交互
<圖: view/index.js>
-> UI組件中獲取 state 數據、調用 action 方法
用法一：無狀態組件 -> hook（useSelector()、useDispatch()）
<圖: view/index.js>
用法二：class組件 -> connect()
