I'm receiving a type error when using two async actions on one reducer

[brunoti]

Description

I'm receiving a type error when using two async actions on one reducer:

Argument of type '(response: AxiosResponse<LoginResponse>) => PayloadAction<"USER/AUTH/RENEW_SUCCESS", AxiosResponse<LoginResponse>>' is not assignable to parameter of type '((...args: any[]) => PayloadAction<"USER/PERMISSION/SET_LOCATION", PermissionInfo> | PayloadAction<"USER/PERMISSION/SET_LOADING", boolean> | ... 11 more ... | EmptyAction<...>) | ((...args: any[]) => PayloadAction<...> | ... 12 more ... | EmptyAction<...>)[]'.
  Type '(response: AxiosResponse<LoginResponse>) => PayloadAction<"USER/AUTH/RENEW_SUCCESS", AxiosResponse<LoginResponse>>' is not assignable to type '(...args: any[]) => PayloadAction<"USER/PERMISSION/SET_LOCATION", PermissionInfo> | PayloadAction<"USER/PERMISSION/SET_LOADING", boolean> | ... 11 more ... | EmptyAction<...>'.
    Type 'PayloadAction<"USER/AUTH/RENEW_SUCCESS", AxiosResponse<LoginResponse>>' is not assignable to type 'PayloadAction<"USER/PERMISSION/SET_LOCATION", PermissionInfo> | PayloadAction<"USER/PERMISSION/SET_LOADING", boolean> | ... 11 more ... | EmptyAction<...>'.
      Type 'PayloadAction<"USER/AUTH/RENEW_SUCCESS", AxiosResponse<LoginResponse>>' is not assignable to type 'PayloadAction<"USER/PERMISSION/SET_LOCATION", PermissionInfo>'.
        Type '"USER/AUTH/RENEW_SUCCESS"' is not assignable to type '"USER/PERMISSION/SET_LOCATION"'.

Mandatory info

• [X] Are you extending internal types to enable type-free syntax with createReducer?

  
  import { StateType, ActionType } from 'typesafe-actions';

declare module 'typesafe-actions' { export type Store = StateType<typeof import('./index').store>; export type RootState = StateType<typeof import('./root-reducer').reducer>; export type RootAction = ActionType<typeof import('./root-action')>;

interface Types { RootAction: RootAction; } }

- [x] Did you checked [compatibility notes][1] and [migration guides][2]?

## How to Reproduce

This is my folder structure:

./app/store ├── clients.ts ├── index.ts ├── root-action.ts ├── root-reducer.ts └── types.d.ts

./app/basket/store ├── actions.ts ├── order │   ├── actions.ts │   └── reducer.ts ├── product │   ├── actions.ts │   └── reducer.ts ├── reducer.ts └── search ├── actions.ts └── reducer.ts ./app/user/store ├── actions.ts ├── auth │   ├── actions.ts │   ├── reducer.ts │   └── thunks.ts ├── permission │   ├── actions.ts │   └── reducer.ts └── reducer.ts

```ts
import { createReducer } from 'typesafe-actions';
import { UserResponse } from 'user/types';
import * as actions from './actions';

type UserAuthState = Readonly<{
  data?: UserResponse;
  loading: boolean;
  token?: string;
}>;

const INITIAL_STATE: UserAuthState = {
  data: undefined,
  token: undefined,
  loading: false,
};

const reducer = createReducer(INITIAL_STATE)
  .handleAction(actions.login.success, (state, { payload }) => ({
    ...state,
    data: payload.data.user,
    token: payload.data.token,
    loading: false,
  }))
  .handleAction(actions.login.request, state => ({
    ...state,
    loading: true,
  }))
  .handleAction(actions.login.failure, state => ({
    ...state,
    loading: false,
  }))
  .handleAction(actions.setUser, (state, { payload }) => ({
    ...state,
    data: payload,
  }))
  .handleAction(actions.setToken, (state, { payload }) => ({
    ...state,
    token: payload,
  }))
  .handleAction(actions.renew.success, (state, { payload }) => ({ // Here I receive the error descripted
    ...state,
    data: payload.data.user,
    token: payload.data.token,
  }))
  .handleAction(actions.reset, () => ({ ...INITIAL_STATE }));

export { reducer };

My async actions (./app/user/store/auth):

export const renew = createAsyncAction(
  ['USER/AUTH/RENEW', (): RequestPayload => ({
    client: 'user',
    request: {
      method: 'POST',
      url: '/renew',
    },
  })],
  ['USER/AUTH/RENEW_SUCCESS', (response: AxiosResponse<LoginResponse>): AxiosResponse<LoginResponse> => response],
  ['USER/AUTH/RENEW_FAIL', (error: AxiosError): AxiosError => error],
)<RequestPayload, AxiosResponse<LoginResponse>, AxiosError>();

export const renew = createAsyncAction(
  ['USER/AUTH/RENEW', (): RequestPayload => ({
    client: 'user',
    request: {
      method: 'POST',
      url: '/renew',
    },
  })],
  ['USER/AUTH/RENEW_SUCCESS', (response: AxiosResponse<LoginResponse>): AxiosResponse<LoginResponse> => response],
  ['USER/AUTH/RENEW_FAIL', (error: AxiosError): AxiosError => error],
)<RequestPayload, AxiosResponse<LoginResponse>, AxiosError>();

export const login = createAsyncAction(
  ['USER/AUTH/LOGIN', (data: Login): RequestPayload => ({
    client: 'user',
    request: {
      method: 'POST',
      url: '/login',
      data,
    },
  })],
  ['USER/AUTH/LOGIN_SUCCESS', (response: AxiosResponse<LoginResponse>): AxiosResponse<LoginResponse> => response],
  ['USER/AUTH/LOGIN_FAIL', (error: AxiosError): AxiosError => error],
)<RequestPayload, AxiosResponse<LoginResponse>, AxiosError>();

The action the error cites as conflict (./app/user/store/permissions/actions.ts):

import { createAction } from 'typesafe-actions';
import { PermissionInfo } from 'expo-permissions';

export const setLocation = createAction('USER/PERMISSION/SET_LOCATION')<PermissionInfo>();
export const setLoading = createAction('USER/PERMISSION/SET_LOADING')<boolean>();

Expected behavior

No type error there, since everything was ok until I added the renew handlers on this reducer. I've tried a lot of stuff, changing types, removing that other action but the error just changes the message and never goes away.

Suggested solution(s)

I really don't know. But if I can help in any way, just say. I'm sorry I couldn't put a codesandbox link. I'm using ReactNative and I found it very hard to recreate the same environment on codesandbox.

Project Dependencies

• Typesafe-Actions Version: 5.1.0
• TypeScript Version: 3.8.3
• tsconfig.json:

  {
  "compilerOptions": {
  "jsx": "react-native",
  "lib": ["dom", "esnext"],
  "target": "esnext",
  "moduleResolution": "node",
  "allowSyntheticDefaultImports": true,
  "sourceMap": true,
  "removeComments": true,
  "strict": true,
  "noImplicitAny": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noImplicitReturns": true,
  "noFallthroughCasesInSwitch": true,
  "noEmit": true,
  "skipLibCheck": true,
  "incremental": true,
  "composite": true,
  "esModuleInterop": true,
  "emitDecoratorMetadata": true,
  "noEmitHelpers": true,
  "declaration": false,
  "importHelpers": true,
  "baseUrl": "app",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "noEmitOnError": false,
  "pretty": true,
  "paths": {
    "*": ["*"]
  }
  },
  "include": [
  "app/**/*"
  ],
  "exclude": [
  "./node_modules/**/*"
  ]
  }

Environment (optional)

• Browser and Version: React Native / Expo 37
• OS: MacOS Catalina
• Node Version: 13
• Package Manager and Version: Yarn 1.22.4

[piotrwitek]

Hey @brunoti,

When declaring async actions there are 2 typing styles, please make sure to not use both of them. Here are example docs: #143

Basically try this:

export const renew = createAsyncAction(
  ['USER/AUTH/RENEW', (): RequestPayload => ({
    client: 'user',
    request: {
      method: 'POST',
      url: '/renew',
    },
  })],
  ['USER/AUTH/RENEW_SUCCESS', (response: AxiosResponse<LoginResponse>): AxiosResponse<LoginResponse> => response],
  ['USER/AUTH/RENEW_FAIL', (error: AxiosError): AxiosError => error],
)();

Please do the same with all async actions respectively.

[brunoti]

That worked! I got confused between docs in the beginning. That plus tutorials got me to the wrong path.

[piotrwitek]

Yes it's confusing right now I agree, I have to work on it.