跳至主要内容

Redux Toolkit TypeScript 快速入门

您将学到什么
  • 如何使用 TypeScript 设置和使用 Redux Toolkit 和 React-Redux
先决条件

简介​

欢迎使用 Redux Toolkit TypeScript 快速入门教程！本教程将简要介绍如何在 Redux Toolkit 中使用 TypeScript。

本页重点介绍如何设置 TypeScript 方面。有关 Redux 的解释、工作原理以及如何使用 Redux Toolkit 的完整示例，请参阅“教程概述”页面中链接的教程。

Redux Toolkit 已经用 TypeScript 编写，因此它的 TS 类型定义是内置的。

React Redux 在 NPM 上有一个单独的 @types/react-redux 类型定义包。除了对库函数进行类型化之外，这些类型还导出了一些帮助程序，使编写 Redux 存储和 React 组件之间类型安全的接口变得更加容易。

从 React Redux v7.2.3 开始，react-redux 包依赖于 @types/react-redux，因此类型定义将与库一起自动安装。否则，您需要手动安装它们（通常是 npm install @types/react-redux）。

用于 Create-React-App 的 Redux+TS 模板 带有一个已经配置好的这些模式的工作示例。

项目设置​

定义根状态和调度类型​

使用 configureStore 不需要任何额外的类型化。但是，您需要提取 RootState 类型和 Dispatch 类型，以便可以在需要时引用它们。从存储本身推断这些类型意味着它们会在您添加更多状态切片或修改中间件设置时正确更新。

由于这些是类型，因此可以安全地从您的存储设置文件（例如 app/store.ts）中直接导出它们，并直接导入到其他文件中。

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

export const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    users: usersReducer,
  },
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

定义类型化钩子​

虽然可以将 RootState 和 AppDispatch 类型导入到每个组件中，但最好为应用程序中的使用创建 useDispatch 和 useSelector 钩子的类型化版本。这对于几个原因很重要

  • 对于 useSelector，它可以节省您每次都键入 (state: RootState) 的需要
  • 对于 useDispatch，默认的 Dispatch 类型不知道 thunk。为了正确地分派 thunk，您需要使用来自存储的特定自定义 AppDispatch 类型，该类型包含 thunk 中间件类型，并将其与 useDispatch 一起使用。添加预类型化的 useDispatch 钩子可以防止您忘记在需要的地方导入 AppDispatch。

由于这些是实际的变量，而不是类型，因此在单独的文件（例如 app/hooks.ts）中定义它们很重要，而不是在存储设置文件中。这使您能够将它们导入到需要使用这些钩子的任何组件文件中，并避免潜在的循环导入依赖问题。

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

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

应用程序使用​

定义切片状态和操作类型​

每个切片文件都应该为其初始状态值定义一个类型，以便 createSlice 可以正确推断每个情况 reducer 中 state 的类型。

所有生成的 action 应该使用 Redux Toolkit 中的 PayloadAction<T> 类型定义，该类型将 action.payload 字段的类型作为其泛型参数。

您可以安全地从存储文件这里导入 RootState 类型。这是一个循环导入，但 TypeScript 编译器可以为类型正确地处理它。这可能需要用于编写选择器函数等用例。

features/counter/counterSlice.ts
import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'
import type { RootState } from '../../app/store'

// Define a type for the slice state
interface CounterState {
  value: number
}

// Define the initial state using that type
const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  // `createSlice` will infer the state type from the `initialState` argument
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    // Use the PayloadAction type to declare the contents of `action.payload`
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

// Other code such as selectors can use the imported `RootState` type
export const selectCount = (state: RootState) => state.counter.value

export default counterSlice.reducer

生成的 action 创建者将被正确地类型化以接受一个 payload 参数，该参数基于您为 reducer 提供的 PayloadAction<T> 类型。例如，incrementByAmount 需要一个 number 作为其参数。

在某些情况下，TypeScript 可能会不必要地收紧初始状态的类型。如果发生这种情况，您可以通过使用 as 转换初始状态来解决它，而不是声明变量的类型

// Workaround: cast state instead of declaring variable type
const initialState = {
  value: 0,
} satisfies CounterState as CounterState

在组件中使用类型化钩子​

在组件文件中，导入预类型化的钩子，而不是来自 React-Redux 的标准钩子。

features/counter/Counter.tsx
import React, { useState } from 'react'

import { useAppSelector, useAppDispatch } from 'app/hooks'

import { decrement, increment } from './counterSlice'

export function Counter() {
  // The `state` arg is correctly typed as `RootState` already
  const count = useAppSelector((state) => state.counter.value)
  const dispatch = useAppDispatch()

  // omit rendering logic
}

下一步？​

查看 “使用 TypeScript”页面，了解有关如何将 Redux Toolkit 的 API 与 TypeScript 一起使用的详细信息。

最后更新于