React Redux 快速開始

您將學到的內容

如何設定與使用 React Redux 中的 Redux Toolkit

先備條件

熟悉 ES6 語法和功能
了解 React 術語：JSX、State（狀態）、Function Components（功能型元件）、Props（道具）和 Hooks（勾子）
瞭解 Redux 條款和概念

簡介

歡迎來到 React Redux 快速入門教學！本教學課程將簡要為您介紹 React Redux，並教導您如何正確開始使用。

如何閱讀本教學課程

本頁面將主重點在如何使用 Redux Toolkit 與 Redux 的主要 API 來設定 Redux 應用程式。若要了解 Redux 的內容、運作方式以及 Redux Toolkit 使用方式的完整範例，請參閱Redux 核心文件中的教學課程。

在本教學課程中，我們假設您同時使用 Redux Toolkit 與 React Redux，因為這是標準的 Redux 使用模式。範例基於典型的 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 儲存庫開始，然後將其匯出

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

export default configureStore({
  reducer: {},
})

這會建立一個 Redux 儲存庫，並自動設定 Redux DevTools 擴充功能，讓您可以在開發時檢查儲存庫。

將 Redux 儲存庫提供給 React

建立儲存庫之後，我們可以將 React Redux <Provider> 放置在 src/index.js 中的應用程式周圍，讓我們的 React 元件可以使用。匯入我們剛剛建立的 Redux 儲存庫，將 <Provider> 放置在 <App> 周圍，並將儲存庫作為一個 prop 傳遞

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

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
)

建立 Redux 狀態區段

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

創建一個 Slice 需要一個字串名稱用來識別 Slice、一個初始狀態值，以及一個或多個 reducer 函式來定義如何更新狀態。一旦創建了一個 Slice，我們就能匯出所產生的 Redux action 建構器和整個 Slice 的 reducer 函式。

Redux 要求我們透過拷貝資料、並更新拷貝，寫入所有狀態更新不變地（immutable）。然而，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.
      // Also, no return statement is required from these functions.
      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

將 Slice Reducer 加入 Store

接著，我們需要從計數器 Slice 匯入 reducer 函式並將之加入 Store。透過在 reducer 參數內定義欄位，我們告訴 Store 使用這個 Slice 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 勾子，讓 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 動作會被發送到 Store
計數器 Slice reducer 會看到動作並更新其狀態
<Counter> 元件會從 Store 看到新的狀態值，並使用新的資料重新渲染自身

你學到了什麼

這是一個關於如何設定並將 Redux Toolkit 與 React 一起使用的簡要概觀。對細節進行概括

摘要

使用 configureStore 建立 Redux 儲存庫
- configureStore 將 reducer 函式當成有名參數接收
- configureStore 會自動使用良好的預設設定建立儲存庫
提供 Redux 儲存庫給 React 應用程式元件
- 使用 React Redux <Provider> 元件包住你的 <App />
- 使用 <Provider store={store}> 傳遞 Redux 儲存庫
使用 createSlice 建立 Redux「區塊」reducer
- 使用字串名稱、初始狀態和有名 reducer 函式呼叫 createSlice
- reducer 函式可以透過 Immer「變更」狀態
- 匯出所建立的區塊 reducer 和 action 建立函式
使用 React Redux useSelector/useDispatch 勾子於 React 元件中
- 使用 useSelector 勾子讀取儲存庫資料
- 使用 useDispatch 勾子取得 dispatch 函式，依需求派遣動作

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

以下是在線執行 CodeSandbox 來完成計數器應用程式

下一步？

我們建議先閱讀Redux 核心文件中的「Redux Essentials」和「Redux Fundamentals」教程，它們會詳細說明 Redux 的運作方式、Redux Toolkit 和 React Redux 的功用，以及如何正確使用它們。

React Redux 快速開始

簡介​

如何閱讀本教學課程​

使用摘要​

安裝 Redux Toolkit 和 React Redux​

建立 Redux 儲存庫​

將 Redux 儲存庫提供給 React​

建立 Redux 狀態區段​

將 Slice Reducer 加入 Store​

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

你學到了什麼​

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

下一步？​

簡介