rootReducer = combineReducer produces type 'Never' with typescript

user_5149399 0
Viewed 2529

When combining my reducers the type is setting the the root reducer to Reducer1: never, Reducer2: never

Example:

const rootReducer = combineReducers({
  stories: storyReducer,
  archivedStories: archiveReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

storyReducer (IStory[] , StoryActionTypes)
archiveReducer (number[], ArchiveActionTypes)

The Type is instead coming out as,

stories: never; archivedStories: never

I followed another stack overflow suggestion and tried to specify the type.

const rootReducer: Reducer<CombinedState<{stories: IStory[]; archivedStories: number[];}>, StoryActionTypes | ArchiveActionTypes> = combineReducers({
  stories: storyReducer,
  archivedStories: archiveReducer,
});

But its still trying to map them to Never

Type 'Reducer<CombinedState<{ stories: never; archivedStories: never; }>, FetchStoriesAction | AddStoriesAction | ArchiveStoryAction>' is not assignable to type 'Reducer<{ stories: IStory[]; archivedStories: number[]; }, FetchStoriesAction | AddStoriesAction | ArchiveStoryAction>'. Types of parameters 'state' and 'prevState' are incompatible. Type '{ stories: IStory[]; archivedStories: number[]; }' is not assignable to type 'CombinedState<{ stories: never; archivedStories: never; }>'. Type '{ stories: IStory[]; archivedStories: number[]; }' is not assignable to type '{ stories: never; archivedStories: never; }'. Types of property 'stories' are incompatible. Type 'IStory[]' is not assignable to type 'never'.ts(2322)

Whats the issue here? Or how can I specify the type correctly? My goal is to use .filter on the IStory[] payload.

These are the reducers:

Story Reducer

const INITIAL_STATE: IStory[] = []
  
const applyAddStories = (state: IStory[], action: StoryActionTypes) => action.payload;

export const storyReducer = (
  state = INITIAL_STATE,
  action: StoryActionTypes
) => {
  switch (action.type) {
    case STORIES_ADD : {
      return applyAddStories(state, action)
    }
    default:
      return state;
  }
};

Archive Reducer

const INITIAL_STATE: number[] = []

const applyArchiveStory = (state: number[], action: ArchiveActionTypes) => [
  ...state,
  action.payload,
];

export const archiveReducer = (
  state = INITIAL_STATE,
  action: ArchiveActionTypes

) => {
  switch (action.type) {
    case STORY_ARCHIVE: {
      return applyArchiveStory(state, action);
    }
    default:
      return state;
  }
};

export default archiveReducer;
redux typescript
1 Answers

I'd recommend enforcing the return type of your reducer. That's something I like to do, as it helps to type-check the reducer implementation:

//                                                           here
//                                                              v
function storyReducer(state: IStory[], action: StoryActionTypes): IStory[] {
  // ...
}

You won't need to explicitly type the reducer, it will just work with your original code:

const rootReducer = combineReducers({
  stories: storyReducer,
  archivedStories: archiveReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

Here's a playground demonstrating the result: link

user_2925860
Related