The function signature '(state: State, action: Action) => State' does not match the expected parameter type of 'Reducer<State, Action<any>>'

Currently, I am in the process of setting up a redux store using the code snippet below.

import { createStore, Action } from "redux";
interface State {
  page: string;
}

const updater = (currentState: State, action: Action) => {
  return currentState;
};
export const storage = createStore(updater);

However, I've encountered an issue with the createStore function. The error message states that:

No suitable overload exists for this call.
  Overload 1 of 2, '(updater: Updater<State, Action<any>>, enhancer?: Enhancer<unknown, unknown> | undefined): Storage<State, Action<...>>', caused the following error.
    Argument of type '(currentState: State, action: Action) => State' is not compatible with parameter of type 'Updater<State, Action<any>>'.
      Incompatible types for parameters 'currentState' and 'state'.
        Type 'State | undefined' cannot be assigned to type 'State'.
          Type 'undefined' cannot be assigned to type 'State'.
  Overload 2 of 2, '(updater: Updater<State, Action<any>>, initialState?: { page: string; } | undefined, enhancer?: Enhancer<unknown, {}> | undefined): Storage<...>', led to the following error.
    Argument of type '(currentState: State, action: Action) => State' is not compatible with parameter of type 'Updater<State, Action<any>>'.

The version of Redux being used is ^4.1.0.

Answer №1

When defining a Reducer, keep in mind that the incoming state may sometimes be undefined. To handle this, consider declaring your reducer function as follows:

const myReducer = (currentState: State | undefined, action: Action): State => {
  return currentState ?? { page: 'default' }
}

Answer №2

Dealing with a comparable issue, I managed to resolve it by defining the action type within the reducer function like so:

const reducer = (state: State, action: Action | AnyAction) => {
  return state;
};

I included AnyAction in the function.

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

Encountering a syntax error when attempting to utilize the colon symbol for specifying data types

Currently, I am a novice who is delving into the world of TypeScript. Here is a snippet of code that I have written: let num: number = 123; console.log(123); However, when attempting to run this file using Node.js and saving it as test.ts, I encounter the ...

What could be the reason for the Express function Router() returning a value of undefined?

Currently, I am working with TypeScript and Express to develop an API that adheres to the principles of Clean Architecture. To organize my application, I have structured each route in separate folders and then imported them all into an index.ts file where ...

Enhance Your NestJS Application by Extending Mongoose Schemas and Overriding Parent Properties

In order to achieve the desired functionality, I have a requirement for my Class B to extend a Class A. This initial step works as intended; however, the next task at hand is overriding a property of Class A within Class B. More specifically, it is necess ...

I seem to be encountering an issue with my Angular 6 HTTP PUT request

Below is the code snippet: products.service: updateCategorie(ucategorie: Icategorie) { const endpoint = this.url + 'api/Category/Edit'; const headers = new Headers(); headers.append('Authorization', 'Bearer ' + localStorage ...

Encountering an error message stating "The variable 'App' is declared but not used" when running the index.tsx function

This React project is my attempt to learn how to use a modal window. The tutorial I've been following on YouTube uses JavaScript instead of TypeScript for their React project. However, I'm facing some challenges. Could you possibly help me ident ...

Strategies for resolving type issues in NextJs with Typescript

In my project using Next.js with TypeScript, I encountered an issue while trying to utilize the skipLibCheck = false property for enhanced checking. This additional check caused the build process to break, resulting in the following error: Error info - U ...

Converting a TypeScript class to a plain JavaScript object using class-transformer

I have a few instances of TypeScript classes in my Angular app that I need to save to Firebase. However, Firebase does not support custom classes, so I stumbled upon this library: https://github.com/typestack/class-transformer which seems to be a good fit ...

Using TypeScript and Angular to remove properties from an object

My RandomValue class and WeatherForecast class are causing me some trouble. The WeatherForecast class is functioning properly, populating the table with data as expected. However, the RandomValues class/interface appears to be returning a list of objects w ...

Equivalent of the .Single(predicate) method from .NET in Typescript

When programming in .NET, I know how to do the following: var ls = new List<string>(1,2,3,3,3,4,5,6); var x1 = ls.Single(x => x == 3); // throws exception because there are more elems of 3 defined in ls var x2 = ls.SingleOrDefault(x => x==3) / ...

Use leaflet.js in next js to conceal the remainder of the map surrounding the country

I'm currently facing an issue and would appreciate some assistance. My objective is to display only the map of Cameroon while hiding the other maps. I am utilizing Leaflet in conjunction with Next.js to showcase the map. I came across a helpful page R ...

Icon for TypeScript absent from npm package listings

Recently, I created a package and uploaded it to the npm repository. The package was displayed with an icon labeled "ts" on the website. https://i.stack.imgur.com/LoY1x.png The accompanying package.json showcased the inclusion of the "ts" icon - https:// ...

Utilizing Angular 5 routerLink for linking to absolute paths with hash symbols

I am facing an issue with a URL that needs to be opened in a new tab. Unfortunately, Angular generates this URL without the # symbol. Currently, we have implemented the following: <!-- HTML --> <a title="Edit" [routerLink] = "['/object/objec ...

I want to modify a class in Angular 8 by selecting an element using its ID and adjust the styling of a div

Is it possible to dynamically add and remove classes using getElementById in Angular 8? I need to switch from 'col-md-12' to 'col-md-6' when a user clicks on the details icon. I also want to modify the style of another div by setting d ...

gulp-angular2 task is malfunctioning

Currently, I am in the process of working on a gulpfile and have written the following task: var tsProject = ts.createProject('app/Resources/public/angular/tsconfig.json'); gulp.task('angular-2', function () { var tsResul ...

How can Jest be configured to test for the "permission denied" error?

In my Jest test, I am testing the behavior when trying to start a node http server with an invalid path for the socket file: describe('On any platform', (): void => { it('throws an error when trying to start with an invalid socket P ...

DuplicateModelError: Unable to duplicate model after it has been compiled, React.js, MongoDB, TypeScript

In the early stages of developing an application using Next.js, Mongoose, and Typescript, I encountered a persistent issue. Whenever I attempt to send a request through Postman after clicking save, it fails, displaying the error message: OverwriteModelErr ...

Don't forget to include the line 'import "reflect-metadata"' at the beginning of your entry point for Jest tests

As I work on developing an application using dependency injection with tsyringe, I came across a case where a service receives the repository as a dependency. Here is an example: import { injectable, inject } from 'tsyringe' import IAuthorsRepos ...

Unleashing the power of storytelling with React: A guide to creating dynamic story

weather.stories.ts export default { title: 'Widgets/Forecast', component: Weather, } const Template: Story<any> = (args) => <Weather {...args} />; export const Default = Template.bind({}); Default.args = { forecast: { ...

There was an error encountered: Uncaught TypeError - Unable to access the 'append' property of null in a Typescript script

I encountered the following error: Uncaught TypeError: Cannot read property 'append' of null in typescript export class UserForm { constructor(public parent: Element) {} template(): string { return ` <div> < ...

Hovering over a table cell triggers a popup in Angular

Inserted a class into <td><span class="only-show-on-hover"></span></td> CSS code for the class td span.only-show-on-hover { visibility: hidden; } td:hover span.only-show-on-hover { visibility: visible; } Code for dialog box < ...