Angular is giving State’ is not assignable to type ‘ActionReducer<State, Action>’ error


enter image description here

Above error is thrown by VSCode IDE,

while trying to combine reducers in one file.

import { ActionReducerMap } from '@ngrx/store';
import { employeeReducer, State } from './store/reducers/employee.reducer';

export interface AppState {
  employee: State;

export const appReducer: ActionReducerMap<AppState> = {
  employee: employeeReducer, // Getting IDE error here

My action looks like

import { Action } from '@ngrx/store';
import * as EmployeeActions from '../actions/employee.actions';

export interface State {
  name: string;
  designation: string;

export const initialState: State = {
  name: '',
  designation: '',

export function employeeReducer(
  state = initialState,
  action: EmployeeActions.EmployeeActions
) {
  switch (action.type) {
    case EmployeeActions.GET_EMPLOYEES:
    console.log("The PayLoad", action.payload);
      return {
        name: 'hello',
        designation: 'world',
      return state;

The above IDE error can be fixed by setting action: Action from import { Action } from '@ngrx/store'

export function employeeReducer(
  state = initialState,
  action: Action
) {

But it will throw error while accessing payload from action action.paylod (in reducer)

anyhow action.type is accessible

Any kind of help will much be appreciated

Source: Angular Questions

Categorized as angular, angular13, ngrx-reducers, ngrx-store Tagged , , ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us