代码之家 › 专栏 › 技术社区 › pmiranda

TypeScript,react测试AnyAction中缺少的类型

react-testing-library redux-thunk typescript

pmiranda · 技术社区 · 4 年前

我有个错误:

TS2345: Argument of type '(dispatch: Dispatch) => Promise<void>' is not assignable to parameter of
type 'AnyAction'. Â Â Property 'type' is missing in type '(dispatch: Dispatch) => Promise<void>' but
required in type 'AnyAction'. type' is declared here* :

* 声明的代码是:

export interface Action<T = any> {
  type: T
}

这是我的测试代码:

import configureStore from 'redux-mock-store';
import reduxThunk from 'redux-thunk';
// some code, then in the test I have:

const mockStore = configureStore([reduxThunk]);
const store = mockStore({});

store.dispatch(signIn()); //here I have the error

的定义 signIn 是:

export const signIn = () =>
  async (dispatch: Dispatch): Promise<void> => {
    dispatch({
      type: SIGN_IN_REQUEST
    });
  };

有什么关于如何修复它的提示或想法?

2 回复 | 直到 4 年前

tmhao2005 4 年前

configureStore 允许我们传递参数来表示调度扩展,以便使其工作 redux-thunk 我们必须具体说明 ThunkDispatch 作为参数如下:

import { ThunkDispatch } from 'redux-thunk';

// your app state
interface AppState {}

// you can even express more params for `ThunkDispatch`
const mockStore = configureMockStore<AppState, ThunkDispatch<AppState, any, any>>([])

pmiranda 4 年前

正如tmho2005所说,我是通过阅读他的答案和其他类似的线索来做到这一点的。这是我的代码,以防有人想要它:

// only relevant code for the question
import { AnyAction } from 'redux';
import configureStore from 'redux-mock-store';
import reduxThunk, { ThunkDispatch } from 'redux-thunk';

import { AuthState } from '../../../types'; // that's the definition of my app state

type DispatchExts = ThunkDispatch<AuthState, void, AnyAction>;

// And the code for mys tests:

const mockStore = configureStore<AuthState, DispatchExts>([reduxThunk]);
const store = mockStore(defaultState);

await store.dispatch(signIn({
  username: 'foo',
  password: 'bar'
}));

推荐文章

Piotr Chmielowiec · 组件从一个调度发出两个api调用

2 年前

zishe · React Redux同步操作返回一些代理对象而不是字符串

6 年前

DÅ¾enis H. · 仅在刷新页面后呈现道具

6 年前

lex · reactjs减速机相关术语说明[已关闭]

6 年前

kosmicbird · 如何将异步thunk操作延迟到存储了身份验证会话令牌之后?

6 年前

John · 404使用react-routerv4从react redux应用程序中的状态呈现组件时出错?

6 年前

Juan · 与Redux thunk异步/等待。获取错误:操作必须是普通对象。对异步操作使用自定义中间件

6 年前

jsDev · 调用两个异步操作的正确方法

6 年前

samtoya · Redux异步操作getState()返回未定义?

6 年前

Adrian Florescu · Typescript Redux Thunk(类型)

6 年前