使用多个中间件时在 redux store 上正确输入 dispatch

Question

我正在尝试在使用 thunk 中间件和可选中间件记录器 (redux-logger) 的 redux 存储上配置调度类型。

这正确地推断了商店 dispatch...

上的 thunk 类型

import { createStore, applyMiddleware } from 'redux';
import thunk, { ThunkMiddleware } from 'redux-thunk';

// ...

const preloadedState = undefined;
export const store = createStore(rootReducer, preloadedState, applyMiddleware(thunk as ThunkMiddleware));

当我扩展中间件以包含条件记录器并将中间件数组扩展到 applyMiddleware 时，未正确推断商店的 dispatch。


import { createStore, applyMiddleware, Middleware } from 'redux';
import thunk, { ThunkMiddleware } from 'redux-thunk';
import { createLogger } from 'redux-logger';

// ...

const middleware: Middleware[] = [thunk as ThunkMiddleware];

if (Settings.environment === 'development') {
  const logger = createLogger({ collapsed: (_getState, _action, logEntry) => !logEntry.error });
  middleware.push(logger);
}

const preloadedState = undefined;
export const store = createStore(rootReducer, preloadedState, applyMiddleware(...middleware));

这让我发疯了，关于如何解决传播中间件数组时的输入问题有什么想法吗？

Answer 1

这就是 redux-toolkit 派上用场的地方。

他们docs提到要这样做

import { configureStore } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'
import rootReducer from './rootReducer'

const store = configureStore({
  reducer: rootReducer,
})

export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types

export default store

Answer 2

您正在执行 const middleware: Middleware[] = ...，它明确消除了存储在数组中的特定类型，只保留它们 Middleware，而不是 const middleware = [...] as const 以保留有关内容的尽可能多的信息尽可能。（然后使用类型断言允许在不保留这些类型的情况下修改列表，因为无论如何你都不可能依赖）

使用多个中间件时在 redux store 上正确输入 dispatch

Typing dispatch on a redux store correctly when using multiple middleware

thunk

typescript

redux

redux-thunk

react-redux