遷移到現代 Redux

您將會學到

• 如何將舊版的「手寫」Redux 邏輯現代化，以使用 Redux Toolkit
• 如何將舊版的 React-Redux connect 元件現代化，以使用 hooks API
• 如何將使用 TypeScript 的 Redux 邏輯和 React-Redux 元件現代化

概觀

Redux 自 2015 年問世以來，我們撰寫 Redux 程式碼的建議模式已隨著時間大幅改變。就像 React 已從 createClass 演變為 React.Component，再演變為帶有 hooks 的函式元件，Redux 也已從手動商店設定 + 手寫 reducer（使用物件擴充）+ React-Redux 的 connect，演變為 Redux Toolkit 的 configureStore + createSlice + React-Redux 的 hooks API。

許多使用者正在處理較舊的 Redux 程式碼庫，這些程式碼庫是在這些「現代 Redux」模式出現之前就已存在。將這些程式碼庫遷移至當今建議的現代 Redux 模式，將會產生更小且更容易維護的程式碼庫。

好消息是：你可以逐步將程式碼遷移至現代 Redux，逐一進行，讓舊版和新版 Redux 程式碼並存且共同運作！

此頁面涵蓋了現代化現有舊版 Redux 程式碼庫時，你可以使用的通用方法和技術。

資訊

如需有關如何使用 Redux Toolkit + React-Redux hooks 簡化使用 Redux 的「現代 Redux」的更多詳細資訊，請參閱下列其他資源

• Redux Toolkit 是如何使用 Redux 的方式
• Redux Essentials：Redux Toolkit 應用程式結構
• Redux Fundamentals：使用 Redux Toolkit 的現代 Redux
• 簡報：使用 Redux Toolkit 的現代 Redux

使用 Redux Toolkit 現代化 Redux 邏輯

遷移 Redux 邏輯的通用方法是

• 使用 Redux Toolkit 的 configureStore 取代現有的手動 Redux 商店設定
• 挑選現有的區段 reducer 及其相關動作。使用 RTK 的 createSlice 取代它們。一次針對一個 reducer 重複執行。
• 視需要，用 RTK Query 或 createAsyncThunk 取代現有的資料擷取邏輯
• 視需要使用 RTK 的其他 API，例如 createListenerMiddleware 或 createEntityAdapter

你應該總是先用 configureStore 取代舊版的 createStore 呼叫。這是個一次性的步驟，所有現有的 reducer 和 middleware 都會繼續照常運作。configureStore 包含開發模式檢查，用於檢查常見錯誤，例如意外的變異和不可序列化的值，因此這些檢查有助於找出程式碼庫中發生這些錯誤的區域。

資訊

你可以在 Redux Fundamentals, Part 8: Modern Redux with Redux Toolkit 中看到此一般方法的實際應用。

使用 configureStore 設定儲存

典型的舊版 Redux 儲存設定檔案會執行多個不同的步驟

• 將區段 reducer 合併到根 reducer
• 建立 middleware enhancer，通常使用 thunk middleware，以及開發模式中其他可能的 middleware，例如 redux-logger
• 加入 Redux DevTools enhancer，並組合 enhancer
• 呼叫 createStore

以下是在現有應用程式中這些步驟可能呈現的樣子

src/app/store.js

import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
import thunk from 'redux-thunk'

import postsReducer from '../reducers/postsReducer'
import usersReducer from '../reducers/usersReducer'

const rootReducer = combineReducers({
  posts: postsReducer,
  users: usersReducer
})

const middlewareEnhancer = applyMiddleware(thunk)

const composeWithDevTools =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const composedEnhancers = composeWithDevTools(middlewareEnhancer)

const store = createStore(rootReducer, composedEnhancers)

所有這些步驟都可以用單一呼叫 Redux Toolkit 的 configureStore API 取代.

RTK 的 configureStore 包裹原始的 createStore 方法，並自動為我們處理大部分的儲存設定。事實上，我們可以有效地將它簡化為一個步驟

基本儲存設定：src/app/store.js

import { configureStore } from '@reduxjs/toolkit'

import postsReducer from '../reducers/postsReducer'
import usersReducer from '../reducers/usersReducer'

// Automatically adds the thunk middleware and the Redux DevTools extension
const store = configureStore({
  // Automatically calls `combineReducers`
  reducer: {
    posts: postsReducer,
    users: usersReducer
  }
})

對 configureStore 的那個呼叫為我們完成了所有工作

• 它呼叫 combineReducers 將 postsReducer 和 usersReducer 合併到根 reducer 函式，該函式將處理看起來像 {posts, users} 的根狀態
• 它呼叫 createStore 使用該根 reducer 建立 Redux 儲存
• 它自動加入 thunk middleware 並呼叫 applyMiddleware
• 它自動加入更多 middleware 來檢查常見錯誤，例如意外變異狀態
• 它自動設定 Redux DevTools Extension 連線

如果你的儲存設定需要額外的步驟，例如加入額外的 middleware、傳遞 extra 參數給 thunk middleware，或建立持續化的根 reducer，你也可以這樣做。以下是一個較大的範例，顯示如何自訂內建 middleware 並開啟 Redux-Persist，這展示了使用 configureStore 的一些選項

詳細範例：使用持續化和 middleware 的自訂儲存設定

此範例顯示設定 Redux 儲存時幾個可能的常見任務

• 個別合併 reducer（有時由於其他架構限制而需要）
• 加入額外的 middleware，有條件和無條件
• 傳遞「額外參數」給 thunk middleware，例如 API 服務層
• 使用 Redux-Persist 函式庫，它需要特別處理其不可序列化的動作類型
• 在生產環境中關閉開發人員工具，並在開發環境中設定其他開發人員工具選項

這些都不是必需的，但它們確實會經常出現在實際的程式碼庫中。

自訂儲存設定：src/app/store.js

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/integration/react'
import logger from 'redux-logger'

import postsReducer from '../features/posts/postsSlice'
import usersReducer from '../features/users/usersSlice'
import { api } from '../features/api/apiSlice'
import { serviceLayer } from '../features/api/serviceLayer'

import stateSanitizerForDevtools from './devtools'
import customMiddleware from './someCustomMiddleware'

// Can call `combineReducers` yourself if needed
const rootReducer = combineReducers({
  posts: postsReducer,
  users: usersReducer,
  [api.reducerPath]: api.reducer
})

const persistConfig = {
  key: 'root',
  version: 1,
  storage
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  // Pass previously created persisted reducer
  reducer: persistedReducer,
  middleware: getDefaultMiddleware => {
    const middleware = getDefaultMiddleware({
      // Pass in a custom `extra` argument to the thunk middleware
      thunk: {
        extraArgument: { serviceLayer }
      },
      // Customize the built-in serializability dev check
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
      }
    }).concat(customMiddleware, api.middleware)

    // Conditionally add another middleware in dev
    if (process.env.NODE_ENV !== 'production') {
      middleware.push(logger)
    }

    return middleware
  },
  // Turn off devtools in prod, or pass options in dev
  devTools:
    process.env.NODE_ENV === 'production'
      ? false
      : {
          stateSanitizer: stateSanitizerForDevtools
        }
})

使用 createSlice 的簡化器和動作

典型的舊版 Redux 程式碼庫會將其簡化器邏輯、動作建立器和動作類型分散在不同的檔案中，而且這些檔案通常會依類型分門別類放在不同的資料夾中。簡化器邏輯是使用 switch 陳述式和手寫的不可變更新邏輯，並使用物件擴充和陣列對應。

src/constants/todos.js

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'

src/actions/todos.js

import { ADD_TODO, TOGGLE_TODO } from '../constants/todos'

export const addTodo = (id, text) => ({
  type: ADD_TODO,
  text,
  id
})

export const toggleTodo = id => ({
  type: TOGGLE_TODO,
  id
})

src/reducers/todos.js

import { ADD_TODO, TOGGLE_TODO } from '../constants/todos'

const initialState = []

export default function todosReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO: {
      return state.concat({
        id: action.id,
        text: action.text,
        completed: false
      })
    }
    case TOGGLE_TODO: {
      return state.map(todo => {
        if (todo.id !== action.id) {
          return todo
        }

        return {
          ...todo,
          completed: !todo.completed
        }
      })
    }
    default:
      return state
  }
}

Redux Toolkit 的 createSlice API 是為了消除撰寫簡化器、動作和不可變更新的所有「樣板」而設計的！

使用 Redux Toolkit，對舊版程式碼有多處變更

• createSlice 將完全消除手寫的動作建立器和動作類型
• 所有唯一命名的欄位，例如 action.text 和 action.id，都將由 action.payload 取代，可以是單獨的值，也可以是包含這些欄位的物件
• 由於 Immer，手寫的不可變更新已由簡化器中的「變異」邏輯取代
• 不需要為每種類型的程式碼建立不同的檔案
• 我們教導在單一「區段」檔案中放置所有給定簡化器的邏輯
• 我們建議按「功能」整理檔案，而不是按「程式碼類型」建立不同的資料夾，將相關程式碼放在同一個資料夾中
• 理想情況下，簡化器和動作的命名應使用過去式，並描述「已發生的事情」，而不是命令式的「現在執行此動作」，例如 todoAdded 而不是 ADD_TODO

這些用於常數、動作和簡化器的不同檔案都將由單一的「區段」檔案取代。現代化的區段檔案看起來像這樣

src/features/todos/todosSlice.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = []

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    // Give case reducers meaningful past-tense "event"-style names
    todoAdded(state, action) {
      const { id, text } = action.payload
      // "Mutating" update syntax thanks to Immer, and no `return` needed
      state.todos.push({
        id,
        text,
        completed: false
      })
    },
    todoToggled(state, action) {
      // Look for the specific nested object to update.
      // In this case, `action.payload` is the default field in the action,
      // and can hold the `id` value - no need for `action.id` separately
      const matchingTodo = state.todos.find(todo => todo.id === action.payload)

      if (matchingTodo) {
        // Can directly "mutate" the nested object
        matchingTodo.completed = !matchingTodo.completed
      }
    }
  }
})

// `createSlice` automatically generated action creators with these names.
// export them as named exports from this "slice" file
export const { todoAdded, todoToggled } = todosSlice.actions

// Export the slice reducer as the default export
export default todosSlice.reducer

當您呼叫 dispatch(todoAdded('Buy milk')) 時，您傳遞給 todoAdded 動作建立器的任何單一值都將自動用作 action.payload 欄位。如果您需要傳入多個值，請將它們作為物件傳入，例如 dispatch(todoAdded({id, text}))。或者，您可以在 createSlice 簡化器內使用 「準備」符號 來接受多個不同的引數並建立 payload 欄位。prepare 符號也適用於動作建立器執行其他工作的案例，例如為每個項目產生唯一的 ID。

雖然 Redux Toolkit 沒有特別關注您的資料夾和檔案結構或動作命名，但 這些都是我們建議的最佳實務，因為我們發現它們可以產生更易於維護和理解的程式碼。

使用 RTK Query 擷取資料

在 React+Redux 應用程式中，典型的傳統資料擷取需要許多變動的區塊和程式碼類型

• 表示「請求開始」、「請求成功」和「請求失敗」動作的動作建立器和動作類型
• Thunk 來發送動作並執行非同步請求
• 追蹤載入狀態和儲存快取資料的 Reducer
• 從儲存中讀取這些值的 Selector
• 在元件載入後，在元件中發送 Thunk，透過類別元件中的 componentDidMount 或函式元件中的 useEffect

這些通常會分割在許多不同的檔案中

src/constants/todos.js

export const FETCH_TODOS_STARTED = 'FETCH_TODOS_STARTED'
export const FETCH_TODOS_SUCCEEDED = 'FETCH_TODOS_SUCCEEDED'
export const FETCH_TODOS_FAILED = 'FETCH_TODOS_FAILED'

src/actions/todos.js

import axios from 'axios'
import {
  FETCH_TODOS_STARTED,
  FETCH_TODOS_SUCCEEDED,
  FETCH_TODOS_FAILED
} from '../constants/todos'

export const fetchTodosStarted = () => ({
  type: FETCH_TODOS_STARTED
})

export const fetchTodosSucceeded = todos => ({
  type: FETCH_TODOS_SUCCEEDED,
  todos
})

export const fetchTodosFailed = error => ({
  type: FETCH_TODOS_FAILED,
  error
})

export const fetchTodos = () => {
  return async dispatch => {
    dispatch(fetchTodosStarted())

    try {
      // Axios is common, but also `fetch`, or your own "API service" layer
      const res = await axios.get('/todos')
      dispatch(fetchTodosSucceeded(res.data))
    } catch (err) {
      dispatch(fetchTodosFailed(err))
    }
  }
}

src/reducers/todos.js

import {
  FETCH_TODOS_STARTED,
  FETCH_TODOS_SUCCEEDED,
  FETCH_TODOS_FAILED
} from '../constants/todos'

const initialState = {
  status: 'uninitialized',
  todos: [],
  error: null
}

export default function todosReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_TODOS_STARTED: {
      return {
        ...state,
        status: 'loading'
      }
    }
    case FETCH_TODOS_SUCCEEDED: {
      return {
        ...state,
        status: 'succeeded',
        todos: action.todos
      }
    }
    case FETCH_TODOS_FAILED: {
      return {
        ...state,
        status: 'failed',
        todos: [],
        error: action.error
      }
    }
    default:
      return state
  }
}

src/selectors/todos.js

export const selectTodosStatus = state => state.todos.status
export const selectTodos = state => state.todos.todos

src/components/TodosList.js

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchTodos } from '../actions/todos'
import { selectTodosStatus, selectTodos } from '../selectors/todos'

export function TodosList() {
  const dispatch = useDispatch()
  const status = useSelector(selectTodosStatus)
  const todos = useSelector(selectTodos)

  useEffect(() => {
    dispatch(fetchTodos())
  }, [dispatch])

  // omit rendering logic here
}

許多使用者可能會使用 redux-saga 函式庫來管理資料擷取，在這種情況下，他們可能會使用額外的「訊號」動作類型來觸發 saga，並使用此 saga 檔案代替 thunk

src/sagas/todos.js

import { put, takeEvery, call } from 'redux-saga/effects'
import {
  FETCH_TODOS_BEGIN,
  fetchTodosStarted,
  fetchTodosSucceeded,
  fetchTodosFailed
} from '../actions/todos'

// Saga to actually fetch data
export function* fetchTodos() {
  yield put(fetchTodosStarted())

  try {
    const res = yield call(axios.get, '/todos')
    yield put(fetchTodosSucceeded(res.data))
  } catch (err) {
    yield put(fetchTodosFailed(err))
  }
}

// "Watcher" saga that waits for a "signal" action, which is
// dispatched only to kick off logic, not to update state
export function* fetchTodosSaga() {
  yield takeEvery(FETCH_TODOS_BEGIN, fetchTodos)
}

所有這些程式碼都可以用 Redux Toolkit 的「RTK Query」資料擷取和快取層 來取代！

RTK Query 取代了撰寫任何動作、thunk、reducer、selector 或效果來管理資料擷取的需要。（事實上，它實際上使用所有這些相同的工具作為內部。）此外，RTK Query 會負責追蹤載入狀態、取消重複請求，並管理快取資料的生命週期（包括移除不再需要的過期資料）。

若要移轉，設定單一的 RTK Query「API 區段」定義，並將產生的 reducer + 中介軟體新增到你的儲存

src/features/api/apiSlice.js

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  baseQuery: fetchBaseQuery({
    // Fill in your own server starting URL here
    baseUrl: '/'
  }),
  endpoints: build => ({})
})

src/app/store.js

import { configureStore } from '@reduxjs/toolkit'

// Import the API object
import { api } from '../features/api/apiSlice'
// Import any other slice reducers as usual here
import usersReducer from '../features/users/usersSlice'

export const store = configureStore({
  reducer: {
    // Add the generated RTK Query "API slice" caching reducer
    [api.reducerPath]: api.reducer,
    // Add any other reducers
    users: usersReducer
  },
  // Add the RTK Query API middleware
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(api.middleware)
})

然後，新增表示你想要擷取和快取的特定資料的「端點」，並匯出每個端點的自動產生的 React 勾子

src/features/api/apiSlice.js

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  baseQuery: fetchBaseQuery({
    // Fill in your own server starting URL here
    baseUrl: '/'
  }),
  endpoints: build => ({
    // A query endpoint with no arguments
    getTodos: build.query({
      query: () => '/todos'
    }),
    // A query endpoint with an argument
    userById: build.query({
      query: userId => `/users/${userId}`
    }),
    // A mutation endpoint
    updateTodo: build.mutation({
      query: updatedTodo => ({
        url: `/todos/${updatedTodo.id}`,
        method: 'POST',
        body: updatedTodo
      })
    })
  })
})

export const { useGetTodosQuery, useUserByIdQuery, useUpdateTodoMutation } = api

最後，在你的元件中使用勾子

src/features/todos/TodoList.js

import { useGetTodosQuery } from '../api/apiSlice'

export function TodoList() {
  const { data: todos, isFetching, isSuccess } = useGetTodosQuery()

  // omit rendering logic here
}

使用 createAsyncThunk 進行資料擷取

我們特別建議使用 RTK Query 來擷取資料。不過，有些使用者告訴我們他們還沒有準備好進行這一步驟。在這種情況下，你至少可以使用 RTK 的 createAsyncThunk 來減少一些手寫 thunk 和 reducer 的樣板。它會自動為你產生動作建立器和動作類型，呼叫你提供的非同步函數來提出請求，並根據承諾生命週期發送這些動作。使用 createAsyncThunk 的範例可能如下所示

src/features/todos/todosSlice

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import axios from 'axios'

const initialState = {
  status: 'uninitialized',
  todos: [],
  error: null
}

const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  // Just make the async request here, and return the response.
  // This will automatically dispatch a `pending` action first,
  // and then `fulfilled` or `rejected` actions based on the promise.
  // as needed based on the
  const res = await axios.get('/todos')
  return res.data
})

export const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    // any additional "normal" case reducers here.
    // these will generate new action creators
  },
  extraReducers: builder => {
    // Use `extraReducers` to handle actions that were generated
    // _outside_ of the slice, such as thunks or in other slices
    builder
      .addCase(fetchTodos.pending, (state, action) => {
        state.status = 'loading'
      })
      // Pass the generated action creators to `.addCase()`
      .addCase(fetchTodos.fulfilled, (state, action) => {
        // Same "mutating" update syntax thanks to Immer
        state.status = 'succeeded'
        state.todos = action.payload
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.status = 'failed'
        state.todos = []
        state.error = action.error
      })
  }
})

export default todosSlice.reducer

你仍然需要撰寫任何選擇器，並在 useEffect 鉤子中自己發送 fetchTodos thunk。

使用 createListenerMiddleware 的反應式邏輯

許多 Redux 應用程式都有「反應式」風格的邏輯，會聆聽特定的動作或狀態變更，並執行其他邏輯來回應。這些行為通常使用 redux-saga 或 redux-observable 函式庫實作。

這些函式庫用於各種任務。舉一個基本的範例，一個聆聽動作、等待一秒，然後發送其他動作的 saga 和 epic 可能如下所示

src/sagas/ping.js

import { delay, put, takeEvery } from 'redux-saga/effects'

export function* ping() {
  yield delay(1000)
  yield put({ type: 'PONG' })
}

// "Watcher" saga that waits for a "signal" action, which is
// dispatched only to kick off logic, not to update state
export function* pingSaga() {
  yield takeEvery('PING', ping)
}

src/epics/ping.js

import { filter, mapTo } from 'rxjs/operators'
import { ofType } from 'redux-observable'

const pingEpic = action$ =>
  action$.pipe(ofType('PING'), delay(1000), mapTo({ type: 'PONG' }))

src/app/store.js

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { combineEpics, createEpicMiddleware  } from 'redux-observable';

// skip reducers

import { pingEpic } from '../sagas/ping'
import { pingSaga } from '../epics/ping

function* rootSaga() {
  yield pingSaga()
}

const rootEpic = combineEpics(
  pingEpic
);

const sagaMiddleware = createSagaMiddleware()
const epicMiddleware = createEpicMiddleware()

const middlewareEnhancer = applyMiddleware(sagaMiddleware, epicMiddleware)

const store = createStore(rootReducer, middlewareEnhancer)

sagaMiddleware.run(rootSaga)
epicMiddleware.run(rootEpic)

RTK「聆聽器」中介軟體旨在取代 saga 和 observables，具有更簡單的 API、更小的套件大小和更好的 TS 支援。

saga 和 epic 範例可以用聆聽器中介軟體取代，如下所示

src/app/listenerMiddleware.js

import { createListenerMiddleware } from '@reduxjs/toolkit'

// Best to define this in a separate file, to avoid importing
// from the store file into the rest of the codebase
export const listenerMiddleware = createListenerMiddleware()

export const { startListening, stopListening } = listenerMiddleware

src/features/ping/pingSlice.js

import { createSlice } from '@reduxjs/toolkit'
import { startListening } from '../../app/listenerMiddleware'

const pingSlice = createSlice({
  name: 'ping',
  initialState,
  reducers: {
    pong(state, action) {
      // state update here
    }
  }
})

export const { pong } = pingSlice.actions
export default pingSlice.reducer

// The `startListening()` call could go in different files,
// depending on your preferred app setup. Here, we just add
// it directly in a slice file.
startListening({
  // Match this exact action type based on the action creator
  actionCreator: pong,
  // Run this effect callback whenever that action is dispatched
  effect: async (action, listenerApi) => {
    // Listener effect functions get a `listenerApi` object
    // with many useful methods built in, including `delay`:
    await listenerApi.delay(1000)
    listenerApi.dispatch(pong())
  }
})

src/app/store.js

import { configureStore } from '@reduxjs/toolkit'

import { listenerMiddleware } from './listenerMiddleware'

// omit reducers

export const store = configureStore({
  reducer: rootReducer,
  // Add the listener middleware _before_ the thunk or dev checks
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware)
})

將 Redux 邏輯的 TypeScript 進行轉移

使用 TypeScript 的舊版 Redux 程式碼通常遵循非常冗長的類型定義模式。特別是，社群中的許多使用者決定手動為每個個別動作定義 TS 類型，然後建立「動作類型聯集」，嘗試限制哪些特定動作實際上可以傳遞給 dispatch。

我們特別且強烈建議不要使用這些模式！

src/actions/todos.ts

import { ADD_TODO, TOGGLE_TODO } from '../constants/todos'

// ❌ Common pattern: manually defining types for each action object
interface AddTodoAction {
  type: typeof ADD_TODO
  text: string
  id: string
}

interface ToggleTodoAction {
  type: typeof TOGGLE_TODO
  id: string
}

// ❌ Common pattern: an "action type union" of all possible actions
export type TodoActions = AddTodoAction | ToggleTodoAction

export const addTodo = (id: string, text: string): AddTodoAction => ({
  type: ADD_TODO,
  text,
  id
})

export const toggleTodo = (id: string): ToggleTodoAction => ({
  type: TOGGLE_TODO,
  id
})

src/reducers/todos.ts

import { ADD_TODO, TOGGLE_TODO, TodoActions } from '../constants/todos'

interface Todo {
  id: string
  text: string
  completed: boolean
}

export type TodosState = Todo[]

const initialState: TodosState = []

export default function todosReducer(
  state = initialState,
  action: TodoActions
) {
  switch (action.type) {
    // omit reducer logic
    default:
      return state
  }
}

src/app/store.ts

import { createStore, Dispatch } from 'redux'

import { TodoActions } from '../actions/todos'
import { CounterActions } from '../actions/counter'
import { TodosState } from '../reducers/todos'
import { CounterState } from '../reducers/counter'

// omit reducer setup

export const store = createStore(rootReducer)

// ❌ Common pattern: an "action type union" of all possible actions
export type RootAction = TodoActions | CounterActions
// ❌ Common pattern: manually defining the root state type with each field
export interface RootState {
  todos: TodosState
  counter: CounterState
}

// ❌ Common pattern: limiting what can be dispatched at the types level
export type AppDispatch = Dispatch<RootAction>

Redux Toolkit 旨在大幅簡化 TS 使用，我們的建議包括盡可能推論類型！

根據 我們的標準 TypeScript 設定和使用指南，從設定儲存檔案開始，直接從儲存本身推論 AppDispatch 和 RootState 類型。這將正確包含中介軟體新增的任何 dispatch 修改，例如發送 thunk 的能力，並在你修改區段狀態定義或新增更多區段時更新 RootState 類型。

app/store.ts

import { configureStore } from '@reduxjs/toolkit'
// omit any other imports

const store = configureStore({
  reducer: {
    todos: todosReducer,
    counter: counterReducer
  }
})

// Infer the `RootState` and `AppDispatch` types from the store itself

// Inferred state type: {todos: TodosState, counter: CounterState}
export type RootState = ReturnType<typeof store.getState>

// Inferred dispatch type: Dispatch & ThunkDispatch<RootState, undefined, UnknownAction>
export type AppDispatch = typeof store.dispatch

每個切片檔案都應該宣告並匯出其自身切片狀態的類型。然後，使用 PayloadAction 類型來宣告 createSlice.reducers 內部任何 action 引數的類型。產生的動作建立器將同時具有其接受的引數的正確類型，以及其傳回的 action.payload 類型。

src/features/todos/todosSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface Todo {
  id: string
  text: string
  completed: boolean
}

// Declare and export a type for the slice's state
export type TodosState = Todo[]

const initialState: TodosState = []

const todosSlice = createSlice({
  name: 'todos',
  // The `state` argument type will be inferred for all case reducers
  // from the type of `initialState`
  initialState,
  reducers: {
    // Use `PayloadAction<YourPayloadTypeHere>` for each `action` argument
    todoAdded(state, action: PayloadAction<{ id: string; text: string }>) {
      // omit logic
    },
    todoToggled(state, action: PayloadAction<string>) {
      // omit logic
    }
  }
})

使用 React-Redux 現代化 React 元件

在元件中遷移 React-Redux 使用方式的一般方法是

• 將現有的 React 類別元件遷移為函式元件
• 使用 useSelector 和 useDispatch 勾子（在元件內部）取代 connect 包裝器

您可以在個別的每個元件基礎上執行此操作。具有 connect 和勾子的元件可以同時共存。

此頁面不會介紹將類別元件遷移至函式元件的程序，但會專注於 React-Redux 特有的變更。

將 connect 遷移至勾子

使用 React-Redux connect API 的典型舊版元件可能如下所示

src/features/todos/TodoListItem.js

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import {
  todoToggled,
  todoDeleted,
  selectTodoById,
  selectActiveTodoId
} from './todosSlice'

// A `mapState` function, possibly using values from `ownProps`,
// and returning an object with multiple separate fields inside
const mapStateToProps = (state, ownProps) => {
  return {
    todo: selectTodoById(state, ownProps.todoId),
    activeTodoId: selectActiveTodoId(state)
  }
}

// Several possible variations on how you might see `mapDispatch` written:

// 1) a separate function, manual wrapping of `dispatch`
const mapDispatchToProps = dispatch => {
  return {
    todoDeleted: id => dispatch(todoDeleted(id)),
    todoToggled: id => dispatch(todoToggled(id))
  }
}

// 2) A separate function, wrapping with `bindActionCreators`
const mapDispatchToProps2 = dispatch => {
  return bindActionCreators(
    {
      todoDeleted,
      todoToggled
    },
    dispatch
  )
}

// 3) An object full of action creators
const mapDispatchToProps3 = {
  todoDeleted,
  todoToggled
}

// The component, which gets all these fields as props
function TodoListItem({ todo, activeTodoId, todoDeleted, todoToggled }) {
  // rendering logic here
}

// Finished with the call to `connect`
export default connect(mapStateToProps, mapDispatchToProps)(TodoListItem)

使用 React-Redux 勾子 API，connect 呼叫和 mapState/mapDispatch 引數會被勾子取代！

• mapState 中傳回的每個個別欄位會變成一個獨立的 useSelector 呼叫
• 透過 mapDispatch 傳遞的每個函式會變成在元件內部定義的獨立的回呼函式

src/features/todos/TodoListItem.js

import { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
  todoAdded,
  todoToggled,
  selectTodoById,
  selectActiveTodoId
} from './todosSlice'

export function TodoListItem({ todoId }) {
  // Get the actual `dispatch` function with `useDispatch`
  const dispatch = useDispatch()

  // Select values from the state with `useSelector`
  const activeTodoId = useSelector(selectActiveTodoId)
  // Use prop in scope to select a specific value
  const todo = useSelector(state => selectTodoById(state, todoId))

  // Create callback functions that dispatch as needed, with arguments
  const handleToggleClick = () => {
    dispatch(todoToggled(todoId))
  }

  const handleDeleteClick = () => {
    dispatch(todoDeleted(todoId))
  }

  // omit rendering logic
}

不同的是，connect 透過防止包裝元件在未變更其輸入的 stateProps+dispatchProps+ownProps 之前進行渲染，來最佳化渲染效能。勾子無法執行此操作，因為它們在元件內部。如果您需要防止 React 的正常遞迴渲染行為，請自行使用 React.memo(MyComponent) 包裝元件。

遷移元件的 TypeScript

connect 的主要缺點之一是它非常難以正確輸入，而且類型宣告最後會變得極其冗長。這是因為它是一個高階元件，而且其 API 具有高度彈性（四個引數，全部都是選用的，每個引數都有多個可能的重載和變異）。

社群提出了多種處理此問題的方法，複雜度不一。在較低階的部分，某些用法需要在 mapState() 中輸入 state，然後計算元件所有道具的類型

簡單的 connect TS 範例

import { connect } from 'react-redux'
import { RootState } from '../../app/store'
import {
  todoToggled,
  todoDeleted,
  selectTodoById,
  selectActiveTodoId
} from './todosSlice'

interface TodoListItemOwnProps {
  todoId: string
}

const mapStateToProps = (state: RootState, ownProps) => {
  return {
    todo: selectTodoById(state, ownProps.todoId),
    activeTodoId: selectActiveTodoId(state)
  }
}

const mapDispatchToProps = {
  todoDeleted,
  todoToggled
}

type TodoListItemProps = TodoListItemOwnProps &
  ReturnType<typeof mapStateToProps> &
  typeof mapDispatchToProps

function TodoListItem({
  todo,
  activeTodoId,
  todoDeleted,
  todoToggled
}: TodoListItemProps) {}

export default connect(mapStateToProps, mapDispatchToProps)(TodoListItem)

特別是將 typeof mapDispatch 用作物件很危險，因為如果包含 thunk，它就會失敗。

其他社群建立的模式需要顯著更多的開銷，包括將 mapDispatch 宣告為函式，並呼叫 bindActionCreators 以傳遞 dispatch: Dispatch<RootActions> 類型，或手動計算包裝元件接收的所有道具的類型，並將這些類型作為泛型傳遞給 connect。

一個稍微更好的替代方案是 ConnectedProps<T> 類型，已在 v7.x 中新增至 @types/react-redux，它可以推論 connect 會傳遞給元件的所有道具的類型。這確實需要將呼叫 connect 分成兩部分，才能讓推論正確運作

ConnectedProps<T> TS 範例

import { connect, ConnectedProps } from 'react-redux'
import { RootState } from '../../app/store'
import {
  todoToggled,
  todoDeleted,
  selectTodoById,
  selectActiveTodoId
} from './todosSlice'

interface TodoListItemOwnProps {
  todoId: string
}

const mapStateToProps = (state: RootState, ownProps) => {
  return {
    todo: selectTodoById(state, ownProps.todoId),
    activeTodoId: selectActiveTodoId(state)
  }
}

const mapDispatchToProps = {
  todoDeleted,
  todoToggled
}

// Call the first part of `connect` to get the function that accepts the component.
// This knows the types of the props returned by `mapState/mapDispatch`
const connector = connect(mapStateToProps, mapDispatchToProps)
// The `ConnectedProps<T> util type can extract "the type of all props from Redux"
type PropsFromRedux = ConnectedProps<typeof connector>

// The final component props are "the props from Redux" + "props from the parent"
type TodoListItemProps = PropsFromRedux & TodoListItemOwnProps

// That type can then be used in the component
function TodoListItem({
  todo,
  activeTodoId,
  todoDeleted,
  todoToggled
}: TodoListItemProps) {}

// And the final wrapped component is generated and exported
export default connector(TodoListItem)

React-Redux hooks API 對於 TypeScript 來說容易使用許多！與處理元件包裝、類型推論和泛型的層級相比，hooks 是只需輸入引數並傳回結果的簡單函式。您只需要傳遞 RootState 和 AppDispatch 的類型。

根據 我們的標準 TypeScript 設定和使用指南，我們特別教導設定 hooks 的「預先輸入」別名，以便將正確的類型內建其中，而且只在應用程式中使用那些預先輸入的 hooks。

首先，設定 hooks

src/app/hooks.ts

import { useDispatch, useSelector } from 'react-redux'
import type { AppDispatch, RootState } from './store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
export const useAppSelector = useSelector.withTypes<RootState>()

然後，在您的元件中使用它們

src/features/todos/TodoListItem.tsx

import { useAppSelector, useAppDispatch } from '../../app/hooks'
import {
  todoToggled,
  todoDeleted,
  selectTodoById,
  selectActiveTodoId
} from './todosSlice'

interface TodoListItemProps {
  todoId: string
}

function TodoListItem({ todoId }: TodoListItemProps) {
  // Use the pre-typed hooks in the component
  const dispatch = useAppDispatch()
  const activeTodoId = useAppSelector(selectActiveTodoId)
  const todo = useAppSelector(state => selectTodoById(state, todoId))

  // omit event handlers and rendering logic
}

進一步資訊

請參閱這些文件頁面和部落格文章以取得更多詳細資訊

• 教學
  • Redux Essentials：Redux Toolkit 應用程式結構
  • Redux Fundamentals：使用 Redux Toolkit 的現代 Redux
  • Redux TypeScript 快速入門
• 其他文件
  • Redux Toolkit 是如何使用 Redux 的方式
  • Redux 風格指南：最佳實務和建議
  • Redux 核心：與 TypeScript 搭配使用
  • Redux Toolkit：與 TypeScript 搭配使用
• 文章
  • 簡報：使用 Redux Toolkit 的現代 Redux
  • Mark Erikson：Redux Toolkit 1.0 公告和開發歷程
  • Lenz Weber：請勿建立動作類型聯集