Redux Toolkit 快速入門

您將會學到

如何設定和使用 Redux Toolkit 與 React-Redux

先決條件

簡介

歡迎使用 Redux Toolkit 快速入門教學！本教學將簡要介紹 Redux Toolkit，並教您如何開始正確使用它。

如何閱讀本教學

本頁將重點介紹如何使用 Redux Toolkit 設定 Redux 應用程式，以及您將使用的主要 API。如要了解 Redux 是什麼、如何運作，以及如何使用 Redux Toolkit 的完整範例，請參閱「教學索引」頁面中連結的教學。

在本教學中，我們假設您將 Redux Toolkit 與 React 搭配使用，但您也可以將它與其他 UI 層搭配使用。範例基於典型的 Create-React-App 資料夾結構，其中所有應用程式程式碼都位於 src 資料夾中，但這些模式可以調整為您使用的任何專案或資料夾設定。

Create-React-App 的 Redux+JS 範本已預先設定相同的專案設定。

使用摘要

安裝 Redux Toolkit 和 React-Redux

將 Redux Toolkit 和 React-Redux 套件新增到您的專案

npm install @reduxjs/toolkit react-redux

建立 Redux 儲存

建立一個名為 src/app/store.js 的檔案。從 Redux Toolkit 匯入 configureStore API。我們將從建立一個空的 Redux store 開始，並匯出它

app/store.js
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {}
})

這會建立一個 Redux store，並自動設定 Redux DevTools 擴充功能，以便你在開發時檢查 store。

提供 Redux Store 給 React

一旦 store 建立後，我們可以透過在 src/index.js 中的應用程式周圍放置一個 React-Redux <Provider>，讓我們的 React 元件可以使用它。匯入我們剛剛建立的 Redux store，在你的 <App> 周圍放置一個 <Provider>，並將 store 傳遞為一個 prop

index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

建立一個 Redux 狀態區段

新增一個名為 src/features/counter/counterSlice.js 的新檔案。在該檔案中，從 Redux Toolkit 匯入 createSlice API。

建立一個區段需要一個字串名稱來識別區段、一個初始狀態值，以及一個或多個 reducer 函式來定義如何更新狀態。一旦建立一個區段，我們可以匯出產生的 Redux action creators 和整個區段的 reducer 函式。

Redux 要求我們不可變地撰寫所有狀態更新，透過製作資料的副本並更新副本。然而，Redux Toolkit 的 createSlice 和 createReducer API 在內部使用 Immer，讓我們可以撰寫「變異」更新邏輯，而這些邏輯會變成正確的不可變更新。

features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

將區段 Reducers 加入 Store

接著，我們需要從 counter 區段匯入 reducer 函式，並將它加入我們的 store。透過在 reducer 參數內定義一個欄位，我們告訴 store 使用這個區段 reducer 函式來處理對該狀態的所有更新。

app/store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

在 React 元件中使用 Redux 狀態和動作

現在我們可以使用 React-Redux hooks 讓 React 元件與 Redux store 互動。我們可以使用 useSelector 從 store 讀取資料，並使用 useDispatch 分派動作。建立一個 src/features/counter/Counter.js 檔案，其中包含一個 <Counter> 元件，然後將該元件匯入 App.js 並在 <App> 內部渲染它。

features/counter/Counter.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

現在，任何時候只要您按一下「增加」和「減少」按鈕

對應的 Redux 動作就會傳送至儲存庫
計數器區塊的 reducer 會看到動作並更新其狀態
<Counter> 元件會從儲存庫看到新的狀態值，並使用新的資料重新呈現自身

您已學到的內容

這是如何使用 Redux Toolkit 搭配 React 的簡短概觀。回顧一下細節

摘要

使用 configureStore 建立 Redux 儲存庫
- configureStore 接受 reducer 函式作為命名參數
- configureStore 會自動使用良好的預設設定來設定儲存庫
提供 Redux 儲存庫給 React 應用程式元件
- 在 <App /> 周圍放置 React-Redux <Provider> 元件
- 將 Redux 儲存庫傳遞為 <Provider store={store}>
使用 createSlice 建立 Redux「區塊」reducer
- 使用字串名稱、初始狀態和命名 reducer 函式呼叫 createSlice
- reducer 函式可以使用 Immer 來「變異」狀態
- 匯出產生的區塊 reducer 和動作建立器
在 React 元件中使用 React-Redux useSelector/useDispatch 鉤子
- 使用 useSelector 鉤子從儲存庫讀取資料
- 使用 useDispatch 鉤子取得 dispatch 函式，並視需要傳送動作

完整的計數器應用程式範例

以下是在 CodeSandbox 上執行的完整計數器應用程式

接下來是什麼？

我們建議您瀏覽完整的「Redux Essentials」教學課程，其中涵蓋了 Redux Toolkit 中包含的所有重要部分、它們解決的問題，以及如何使用它們來建構真實世界的應用程式。

您可能也想閱讀「Redux Fundamentals」教學課程，它將讓您完全了解 Redux 的運作方式、Redux Toolkit 的功能，以及如何正確使用它。

Redux Toolkit 快速入門

簡介​

如何閱讀本教學​

使用摘要​

安裝 Redux Toolkit 和 React-Redux​

建立 Redux 儲存​

提供 Redux Store 給 React​

建立一個 Redux 狀態區段​

將區段 Reducers 加入 Store​

在 React 元件中使用 Redux 狀態和動作​

您已學到的內容​

完整的計數器應用程式範例​

接下來是什麼？​

簡介