如何为Redux-Toolkit的createListenerMiddleware监听条目添加类型？

直接给createListenerMiddleware指定你的根状态类型，就能让startListening自动推导所有相关类型，不用手动给listenerApi加类型转换：

步骤1：创建带类型的ListenerMiddleware #

在创建中间件时，通过泛型参数传入你的根状态类型（比如AppState）：

import { createListenerMiddleware } from '@reduxjs/toolkit';
import type { AppState } from './path/to/your/store';

// 指定泛型后，中间件会自动关联你的状态类型
const listenerMiddleware = createListenerMiddleware<AppState>();

步骤2：编写监听逻辑（自动推导类型） #

之后在startListening的effect里，action和listenerApi都会自动获得正确的类型，getState()直接返回AppState，无需类型断言：

listenerMiddleware.startListening({
  actionCreator: toggleSomething,
  effect: async (action, listenerApi) => {
    // state自动是AppState类型，不用as转换
    const state = listenerApi.getState();
    // 执行你的业务逻辑...
  },
});

备选方案：显式指定Effect类型 #

如果需要单独定义effect函数，也可以用ListenerEffect类型来约束，传入action类型和状态类型：

import type { ListenerEffect } from '@reduxjs/toolkit';

const toggleEffect: ListenerEffect<typeof toggleSomething, AppState> = async (action, listenerApi) => {
  const state = listenerApi.getState();
  // 逻辑代码
};

listenerMiddleware.startListening({
  actionCreator: toggleSomething,
  effect: toggleEffect,
});

之前手动标注ListenerEffectAPI<AppState, Dispatch>无效，是因为没有让中间件本身关联你的状态类型，导致TS无法正确推导上下文信息。通过给createListenerMiddleware指定泛型，就能让整个中间件的类型系统自动对齐你的Redux状态。

内容的提问来源于stack exchange，提问作者Shane O'Moore