安裝

Redux Toolkit

Redux Toolkit 包含 Redux 核心，以及我們認為對於建置 Redux 應用程式至關重要的其他主要套件（例如 Redux Thunk 和 Reselect）。

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

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

此套件包含一個預先編譯的 ESM 建置，可作為 <script type="module"> 標籤 直接在瀏覽器中使用。

補充套件

React-Redux

您很可能也需要 react-redux 繫結，以與 React 搭配使用

npm install react-redux

請注意，與 Redux 本身不同，Redux 生態系中的許多套件不提供 UMD 建置，因此我們建議使用模組打包器，例如 Vite 和 Webpack，以獲得最舒適的開發體驗。

Redux DevTools 擴充功能

Redux Toolkit 的 configureStore 自動設定與 Redux DevTools 的整合。您需要安裝瀏覽器擴充功能來檢視儲存狀態和動作

• Redux DevTools 擴充功能
  • 適用於 Chrome 的 Redux DevTools 擴充功能
  • 適用於 Firefox 的 Redux DevTools 擴充功能

如果您使用 React，您也需要 React DevTools 擴充功能

• React DevTools 擴充功能
  • 適用於 Chrome 的 React DevTools 擴充功能
  • 適用於 Firefox 的 React DevTools 擴充功能

建立 React Redux 應用程式

使用 React 和 Redux 開始新應用程式的建議方式是使用 適用於 Vite 的官方 Redux+TS 範本，或使用 Next 的 with-redux 範本 建立新的 Next.js 專案。

這兩個範本都已適當地為該建置工具設定 Redux Toolkit 和 React-Redux，並附帶一個小型範例應用程式，展示如何使用 Redux Toolkit 的多項功能。

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

我們目前沒有官方的 React Native 範本，但建議使用這些範本作為標準的 React Native 和 Expo

• https://github.com/rahsheen/react-native-template-redux-typescript
• https://github.com/rahsheen/expo-template-redux-typescript

Redux Core

要單獨安裝 redux 核心套件

# NPM
npm install redux

# Yarn
yarn add redux

如果您沒有使用捆綁器，您可以 在 unpkg 上存取這些檔案、下載它們，或讓您的套件管理員指向它們。