Typescript error ts(2322) in reducer return

user_18457181 0
Viewed 128

I want to sort my state and delete exact name, i do it with map&filter, they should return the same state, but with a few changes. But TypeScript threw an error 2322

I use TS+Redux Toolkit

This is the reducer

removeName(state, action: PayloadAction<IAction>) {
  return state.teams.map((i) =>
    i.leadName === action.payload.leadName
      ? i.employees.filter((n) => n.name != action.payload.name)
      : i
  );
}

And this is the InitialState interfaces and others

interface InitialTeamState {
  teams: TeamsState[];
}

const initialState: InitialTeamState = {
  teams: []
};

interface IEmployee {
  name?: string;
  birthDate?: number;
  citizenship?: string;
  adress?: string;
  teamLead?: string;
  position?: string;
  phoneNumber?: number | string;
  mail?: string;
  workMail?: string;
  whenHired?: string;
  registration?: number | string;
}

interface TeamsState {
  id: number;
  leadName: string;
  employees: IEmployee[];
}

interface IAction {
  name?: string;
  leadName?: string;
};

And the error : enter image description here

redux-reducers react-redux redux-toolkit redux typescript
1 Answers

Before your state has the shape state = { teams }, after it has the shape state = teams - it is totally correct that TS is telling you that this is wrong.

Maybe you wanted to do

removeName(state, action: PayloadAction<IAction>) {
  state.teams = state.teams.map((i) =>
    i.leadName === action.payload.leadName
      ? i.employees.filter((n) => n.name != action.payload.name)
      : i
  );
}

instead?

user_20759440
Related