Type error when using two async actions on one reducer

I'm receving a type error on one of my reducers and I don't know what to do:

Argument of type '() => PayloadAction<"USER/AUTH/RENEW", RequestPayload>' 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 '() => PayloadAction<"USER/AUTH/RENEW", RequestPayload>' 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", RequestPayload>' 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", RequestPayload>' is not assignable to type 'PayloadAction<"USER/PERMISSION/SET_LOCATION", PermissionInfo>'.
        Type '"USER/AUTH/RENEW"' is not assignable to type '"USER/PERMISSION/SET_LOCATION"'.

I'm using 2 actions from with similar type signatures generated from createAsyncActions one is:

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>();

and the other

export const renew = 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>();

this is the reducer with the error

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.request, state => state)
  .handleAction(actions.renew.failure, state => state)
  .handleAction(actions.renew.success, (state, { payload }) => ({
    ...state,
    data: payload.data.user,
    token: payload.data.token,
  }))
  .handleAction(actions.reset, () => ({ ...INITIAL_STATE }));

export { reducer };

This is the other action cited on the error:

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

I have 3 more reducers, one of them is using a single async action with no problems. When I tried to add two and the auth reducer everything exploded and I don't know why.

I'm using the same configuration on the codesandbox and changing the order of the handleActions just change on which one it will show the error.

piotrwitek / typesafe-actions

Type error when using two async actions on one reducer #232