CODEWITHSUNDEEP
typescriptreduxredux-toolkit
technosis
technosis

Reputation: 87

Typescript, ReduxJS Toolkit - Reducer generated by createSlice is not assignable to parameter of type 'Reducer<unknown, AnyAction>'

I'm new to typescript and having an issue understanding an error. I'm attempting to use a reducer generated by @reduxjs/toolkit's createSlice and feeding that into a function with the following definition:

// .d.ts file
export default function persistReducer<S, A extends Action = Action>(
  config: PersistConfig<S>,
  baseReducer: Reducer<S, A>
): Reducer<S & PersistPartial, A>;

// function definition
export default function persistReducer<State: Object, Action: Object>(
  config: PersistConfig,
  baseReducer: (State, Action) => State
): (State, Action) => State & PersistPartial { /* ... */

Which is returning the following error:

Argument of type 'Reducer<CoreState, AnyAction>' is not assignable to parameter of type 'Reducer<unknown, AnyAction>'.
  Types of parameters 'state' and 'state' are incompatible.
    Type 'unknown' is not assignable to type 'CoreState | undefined'.
      Type 'unknown' is not assignable to type 'CoreState'.ts(2345)

However, it works when I cast the reducer as the Reducer type provided by redux/toolkit.

// fails
persistReducer( persistConfig, coreReducer )

// succeeds
persistReducer( persistConfig, coreReducer as Reducer)

As far as I can tell, the reducer already has that type and I'm not sure why I need to cast the value before sending it along. What am I missing? Any help would be appreciated!

Here's my slice definition

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export type User = {
  id: string,
  name: string,
  avatar: string,
  token: string
}

export type CoreState {
  isSignedIn: boolean,
  user: User | null
};

const defaultCoreState : CoreState = {
  isSignedIn: false,
  user: null
};

export const slice = createSlice({
  name: 'core',
  initialState: defaultCoreState,
  reducers: {
    setUser: (state: CoreState, action: PayloadAction<User | null>) => {
      state.user = action.payload;
      state.isSignedIn = action.payload ? true : false;
    }
  }
});

export const { setUser } = slice.actions;
export default slice.reducer;

Edit: a reducer created using combineReducers triggers the same error, and is alleviated with the same workaround. It seems to me that persistReducer function is having trouble inferring the type even though it has imported same Reducer type definition from the same library. What gives?

Upvotes: 4

Views: 8917

Answers (2)

Asif Amin
Asif Amin

Reputation: 11

Here is a hack to use if you are trying to upgrade your project but don't want to rewrite everything. Instead of fixing the persistReducer in the node module, I've used:

const persisted_reducer = persistReducer<any, any>(persist_config, combined_reducers);

I faced this issue when I tried to use old-style Redux reducers with Redux toolkit slices.

Upvotes: 1

technosis
technosis

Reputation: 87

Thanks to the generous help of @phryneas on the Reactiflux discord, the issue has been solved.

export default function persistReducer<S, A extends Action = Action>

Should become:

export default function persistReducer<S, A extends AnyAction>

Having seen the word "Action" and "Any" so many times in all the definitions I combed through while debugging this, I missed the difference. AnyAction is the correct type.

Upvotes: 3

Related Questions