Error code ts(2322) was encountered while attempting to return from the reducer function

I needed to organize my state and remove specific names using map and filter functions. Although these should return the same state with only a few modifications, TypeScript threw an error 2322

The setup I am using is TS+Redux Toolkit

This is how the reducer looks:

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

Here are the InitialState interfaces and other declarations:

interface InitialTeamState {
  teams: TeamsState[];
}

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

interface IEmployee {
  name?: string;
  birthDate?: number;
  citizenship?: string;
  address?: 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;
};

Lastly, the error message received:

Answer №1

Prior to altering your state from state = { teams } to state = teams, TypeScript correctly identifies that the code is erroneous.

Perhaps you intended to use:

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

as an alternative?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to download tsc through the Terminal on OS X

Struggling to install tsc, encountering numerous errors upon running it. Reinstalled node and npm multiple times, adjusted npm flag to verbose, here's the output: Mitch:~ mitch$ npm install -g typescript npm info it worked if it ends with ok ... Fe ...

The Angular 2 application is experiencing issues with displaying the Bootstrap 4.3 Modal

I am new to Angular so please forgive me if this question sounds silly. I am trying to implement a modal in my app and I followed an example from Bootstrap's documentation. However, the modal doesn't seem to work in my app. Everything else has be ...

Is it possible to create cloud functions for Firebase using both JavaScript and TypeScript?

For my Firebase project, I have successfully deployed around 4 or 5 functions using JavaScript. However, I now wish to incorporate async-await into 2 of these functions. As such, I am considering converting these specific functions to TypeScript. My conc ...

An Error occurred: Unable to resolve all parameters for 'ComponentName': ([object Object], ?)

I am encountering an error that I can't seem to figure out. compiler.js:2175 Uncaught Error: Can't resolve all parameters for ClauseListComponent: ([object Object], ?). at syntaxError (compiler.js:2175) at CompileMetadataResolver._getDependencie ...

Exploring the incorporation of behavior subjects in Angular 8 via services

Just getting started with Angular and running into an issue here. I'm working on an application with multiple sibling components. Whenever I update a value in one component, the changes aren't reflected in the other components. I've heard t ...

Instructions for activating the "Navigate to Declaration" feature in TypeScript for JSON files using i18next

Currently, I am actively engaged in a project that involves the use of i18next with react and typescript. In this project, translation keys are defined within .json files. However, a notable drawback of transitioning to json for the translation files is l ...

What is the best way to use an HTML dropdown menu to select a field with an object as its data type

Objective: Establish a booking instance using the Angular frontend Approach: I am configuring the booking field "category" with an HTML option input through TypeScript. The field is of object data type, consisting of two fields - id and name. Issue: Whil ...

The specified function for handling NetworkError is currently unavailable

I'm trying to implement a retry mechanism for URL calls in case of network failure using the 'cockatiel' library. Below is the code snippet I have written: import { retry, handleType, ExponentialBackoff} from 'cockatiel'; const ...

Applying ORM Drizzle in cases of conflict

Here's where I'm currently at: If I use onConflictDoNothing, the plan is to insert a new record into the database. However, if a record with the same userId and provider already exists, and the apiKey of the existing record is not equal to the ap ...

Is there a method in RXJS that allows an operator to pause and wait for a subscription to finish before proceeding with the workflow?

Being new to the world of RXJS, I have spent a considerable amount of time researching and seeking solutions on stackoverflow and various documentation sources before turning to ask for help here. However, despite my efforts, I am struggling to make my log ...

Determining the name of the currently focused DOM element in Angular2

How can I detect the name of a selected element from a group of select elements on a page? For example: <select (click)="functionDetectName()" name="test1"> <select (click)="functionDetectName()" name="test2"> <select (click)="functionDete ...

Even when I try to access the properties of the arguments object, it remains empty and has a zero

Why is the arguments object showing a length of zero when I pass parameters to the function, even though I can still access its properties? I am referring to the arguments object that is implemented by all JavaScript functions, allowing you to access the f ...

Ways to retrieve a value from a JavaScript function without using the return statement

I wrote a Javascript method as follows: function ServerSideDatasource(server) { return { getRows: function (params) { var response = server.getData(params.request).then((res) => { var result = { success: true, ...

What's the best way to determine the type of the enum literally?

I am working with an enum called RadCheck that looks like this: enum RadCheck { blank = 0, userDefined = 1, macAddress = 2, } const H = RadCheck[RadCheck.blank] Currently, the variable H is being recognized as a string, but I want it to be inferred ...

Dealing with text overflow within a column and ensuring that the text always expands horizontally to align with the column width

I have implemented a file input feature that displays the selected file's name in a column. However, when the file name is too long, it expands vertically which causes readability issues. There is an option to force the text to expand horizontally, b ...

Cannot get Typescript Module System configuration to function properly

I'm encountering an issue with my existing TypeScript project where I'm trying to change the module type to System, but despite setting it in the project properties, the compiler always outputs in AMD format (define...). It's frustrating be ...

Tips for handling Firebase JS SDK errors within try-catch blocks

Attempting to type the err object in a function that saves documents to Firestore has been challenging. async function saveToFirestore(obj: SOME_OBJECT, collection: string, docId: string) { try { await firebase.firestore().collection(collection).doc( ...

After updating to Angular 7, an error was encountered: "TypeError: Unable to execute map function on ctorParameters"

After updating my Angular project to version 7, I encountered a new issue. When running "ng serve --open" from the CLI, I received the following error message: Uncaught TypeError: ctorParameters.map is not a function at ReflectionCapabilities._own ...

Error: The lockfile and package.json file are not synchronized when running npm

Having a problem with NPM where the package-lock and package.json files are out of sync. Tried deleting node_modules, running npm install, but issue persists. Any suggestions? Error: npm ci can only install packages when package.json and package-lock.json ...

Guide on retrieving URL from backend to iframe with Angular Material selection change

https://i.sstatic.net/mWBb5.png This is an .html page <iframe width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe> Here is the code for a .ts file this.url = 'https://www.youtube.com'; Whenever a sel ...