Redux Toolkit的詳細介紹

根據官方分類

Store Setup主要有

• configureStore：包裝 createStore 以提供簡化的配置選項和良好的默認預設。它可以自動組合你的切片 reducers，添加您提供的任何 Redux 中間件，默認情況下包含 redux-thunk ，並允許使用 Redux DevTools 擴展。
• getDefaultMiddleware：返回一個包含默認中間件列表的數組。默認情況下，configureStore 會自動將一些中間件(Middleware)添加到 Redux 存儲設置中。
• Immutability Middleware
• Serializability Middleware
• createListenerMiddleware
• autoBatchEnhancer

Reducers和Actions則有

• createReducer：為 case reducer 函數提供 action 類型的查找表，而不是編寫switch語句。此外，它會自動使用immer 庫來讓您使用普通的可變代碼編寫更簡單的 immutable 更新，例如 state.todos [3] .completed = true 。
• createAction：為給定的 action type string 生成一個 action creator 函數。函數本身定義了 toString()，因此它可以用來代替 type 常量。
• createSlice：接受一個 reducer 函數的對象、切片名稱和初始狀態值，並且自動生成具有相應 action creators 和 action 類型的切片reducer。
• createAsyncThunk：接受一個 action type string 和一個返回 promise 的函數，並生成一個發起基於該 promise 的pending/fulfilled/rejected action 類型的 thunk。
• createEntityAdapter：生成一組可重用的 reducers 和 selectors，以管理存儲中的規範化數據

其他

• createSelector：Reselect 提供了一個名為 createSelector 的函數來生成記憶化 Selector。createSelector 接收一個或多個 input selector 函數，外加一個 output selector 作為參數，並返回一個新的 Selector 函數作為結果。

configureStore

configureStore 接受一個 Redux store 配置對象，並返回一個 Redux store 實例。它可以自動組合你的切片 reducers，添加您提供的任何 Redux 中間件，默認情況下包含 redux-thunk ，並允許使用 Redux DevTools 擴展。

getDefaultMiddleware

createReducer

createAction

createSlice

createAsyncThunk

createEntityAdapter

createSelector

Reselect 提供了一個名為 createSelector 的函數來生成記憶化 Selector。createSelector 接收一個或多個 input selector 函數，外加一個 output selector 作為參數，並返回一個新的 Selector 函數作為結果。

直接舉例比較能夠理解：

const selectA = state => state.a
const selectB = state => state.b
const selectC = state => state.c

const selectABC = createSelector([selectA, selectB, selectC], (a, b, c) => {
  // 對 a、b 和 c 執行操作，並返回一個結果
  return a + b + c
})

// 調用 Selector 並得到結果
const abc = selectABC(state)

// 也可以寫成單獨的參數，結果完全一樣
const selectABC2 = createSelector(selectA, selectB, selectC, (a, b, c) => {
  // 對 a、b 和 c 執行操作，並返回一個結果
  return a + b + c
})