带有 react-redux 连接器的 Redux Toolkit 中间件失败答案

【问题标题】：Redux Toolkit middleware with react-redux connector fails带有 react-redux 连接器的 Redux Toolkit 中间件失败
【发布时间】：2022-07-16 23:52:14
【问题描述】：

我已将 redux 迁移到 @reduxjs/toolkit，但我遇到了问题。在没有应用工具包中间件的情况下一切正常。当我开始应用一些时，我得到了错误。

我有一个组件：

import React from 'react';
import type { PayloadAction } from '@reduxjs/toolkit';

import { type AppDispatch, appConnect } from '@/store/app';
import { authActions } from '@/store/reducers/auth';

import HeaderView from './Header.view';

interface IPropsFromDispatch {
    logout: () => PayloadAction;
}

interface IProps extends IPropsFromDispatch {}

const Header: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
    const onExitButton = () => {
        props.logout();
    };

    return <HeaderView onExitButton={onExitButton} />;
};

Header.displayName = 'Header';
Header.defaultProps = {};

const mapDispatchToProps = (dispatch: AppDispatch): IPropsFromDispatch => {
    return {
        logout: (): PayloadAction => dispatch(authActions.logout()),
    };
};

export default appConnect(null, mapDispatchToProps)(React.memo(Header));

我有以下商店：

import { configureStore } from '@reduxjs/toolkit';
import { type Connect, connect } from 'react-redux';

import authReducer from './reducers/auth';
import authListenMiddleware from './middlewares/auth';

const store = configureStore({
    reducer: {
        auth: authReducer,
    },
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(authListenMiddleware.middleware),
    devTools: process.env.REACT_APP_NODE_ENV === 'development',
});

export type AppState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

export const appConnect = connect as Connect<AppState>;

export default store;

开始在商店应用中间件时，组件文件报错：

TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '(dispatch: AppDispatch) => IPropsFromDispatch' is not assignable to parameter of type 'MapDispatchToPropsParam<IPropsFromDispatch, {}>'.
      Type '(dispatch: AppDispatch) => IPropsFromDispatch' is not assignable to type 'MapDispatchToPropsFactory<IPropsFromDispatch, {}>'.
        Types of parameters 'dispatch' and 'dispatch' are incompatible.
          Type 'Dispatch<Action<unknown>>' is not assignable to type 'ThunkDispatch<{ auth: IAuthState; }, undefined, AnyAction> & ((action: Action<"listenerMiddleware/add">) => UnsubscribeListener) & Dispatch<...>'.
            Type 'Dispatch<Action<unknown>>' is not assignable to type '(action: Action<"listenerMiddleware/add">) => UnsubscribeListener'.
              Type 'Action<"listenerMiddleware/add">' is not assignable to type 'UnsubscribeListener'.
                Type 'Action<"listenerMiddleware/add">' provides no match for the signature '(unsubscribeOptions?: UnsubscribeListenerOptions | undefined): void'.

我也尝试过关注这个帖子： https://github.com/reduxjs/redux-toolkit/issues/2285

但它没有帮助

【问题讨论】：

标签： reactjs typescript redux react-redux redux-toolkit

【解决方案1】：

复制我在问题线程中提供的答案：

最好的修复是不要再使用connect - 改用钩子API :)

次优选择是使用mapDispatch的对象形式，而不是函数形式。

第三个选项是将mapDispatch作为函数直接内联到connect。

【讨论】：