跳至主要內容

什麼是 Redux Toolkit？​

Redux Toolkit 是我們官方的、有主見的、包含電池的工具組，用於高效的 Redux 開發。它旨在成為撰寫 Redux 邏輯的標準方式，我們強烈建議您使用它。

它包含了數個實用函式，可簡化最常見的 Redux 使用案例，包括儲存設定、定義 reducer、不可變更新邏輯，甚至一次建立整個「區塊」的狀態，而無需手動撰寫任何動作建立器或動作類型。它還包含了最廣泛使用的 Redux 外掛程式，例如用於非同步邏輯的 Redux Thunk 和用於撰寫選擇器函式的 Reselect，讓您可以立即使用它們。

安裝​

Redux Toolkit 可作為 NPM 上的套件，供與模組打包器或在 Node 應用程式中使用

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

目的​

Redux 核心程式庫故意不表達意見。它讓你決定如何處理所有事情，例如儲存設定、狀態包含的內容，以及如何建立你的 reducer。

這在某些情況下很好，因為它給你彈性，但並非總是需要這種彈性。有時我們只是想要最簡單的方法來開始，並具有一些開箱即用的良好預設行為。或者，也許你正在撰寫一個較大的應用程式，發現自己撰寫了一些類似的程式碼，而且你希望減少必須手動撰寫的程式碼量。

Redux Toolkit 最初是為了協助解決關於 Redux 的三個常見疑慮而建立的

  • 「設定 Redux 儲存太複雜」
  • 「我必須新增許多套件才能讓 Redux 執行任何有用的功能」
  • 「Redux 需要太多樣板程式碼」

我們無法解決每個使用案例，但本著 create-react-app 和 apollo-boost 的精神，我們可以提供一組官方推薦的工具，來處理最常見的使用案例，並減少需要做出額外決定的情況。

你應該使用 Redux Toolkit 的原因​

Redux Toolkit 透過內建我們的推薦最佳實務、提供良好的預設行為、捕捉錯誤，以及允許你撰寫更簡單的程式碼，讓撰寫良好的 Redux 應用程式變得更容易，並加快開發速度。無論技能等級或經驗如何，Redux Toolkit 對所有 Redux 使用者都有益。它可以在新專案開始時新增，或用於現有專案中的增量遷移中。

請注意，你不需要使用 Redux Toolkit 才能使用 Redux。有許多現有的應用程式使用其他 Redux 包裝器程式庫，或「手動」撰寫所有 Redux 邏輯，如果你仍然偏好使用不同的方法，那就繼續吧！

然而，我們強烈建議對所有 Redux 應用程式使用 Redux Toolkit。

總而言之，無論你是設定第一個專案的全新 Redux 使用者，還是想要簡化現有應用程式的有經驗使用者，使用 Redux Toolkit 都會讓你的程式碼更好，更容易維護。

包含的內容​

Redux Toolkit 包括

  • configureStore()：包裝 createStore 以提供簡化的設定選項和良好的預設值。它可以自動組合你的區塊 reducer，新增你提供的任何 Redux 中介軟體，預設包含 redux-thunk，並啟用 Redux DevTools 擴充功能。
  • createReducer()：讓你可以提供動作類型至案例簡化函式的查詢表，而不是撰寫 switch 陳述式。此外，它會自動使用 immer 函式庫，讓你使用一般的變異碼撰寫更簡潔的不變更新，例如 state.todos[3].completed = true。
  • createAction()：為指定的動作類型字串產生一個動作建立函式。函式本身已定義 toString()，因此可以取代類型常數使用。
  • createSlice()：接受一個簡化函式物件、一個區段名稱和一個初始狀態值，並自動產生一個區段簡化器，以及對應的動作建立器和動作類型。
  • createAsyncThunk：接受一個動作類型字串和一個傳回承諾的函式，並產生一個 thunk，根據該承諾派送 pending/fulfilled/rejected 動作類型
  • createEntityAdapter：產生一組可重複使用的簡化器和選擇器，用於管理儲存體中的正規化資料
  • 來自 Reselect 函式庫的 createSelector 工具程式，重新匯出以方便使用。

Redux Toolkit 也有 RTK Query 資料擷取 API。RTK Query 是一個強大的資料擷取和快取工具，專門為 Redux 建置。它旨在簡化在網路應用程式中載入資料的常見案例，無需自行手動撰寫資料擷取和快取邏輯。

文件​

完整的 Redux Toolkit 文件可以在 https://redux-toolkit.dev.org.tw 找到。