Having issues with TypeScript while using Redux Toolkit along with Next Redux Wrapper?

I have been struggling to find a solution. I have asked multiple questions on different platforms but haven't received any helpful answers. Can someone please assist me? Your help is greatly needed and appreciated. Please take some time out of your busy schedule.

My issue involves configuring Redux toolkit (@reduxjs/toolkit) with next redux wrapper(next-redux-wrapper). However, I am encountering a problem.

The specific error message I am facing is-

Type error: Type '(state: ReturnType<typeof combinedReducer>, action: AnyAction) => any' is not assignable to type 'Reducer<CombinedState<{ counter: { value: any; }; }>, AnyAction> | ReducersMapObject<CombinedState<{ counter: { value: any; }; }>, AnyAction>'.

The error is originating from Store.ts-

import { Action, AnyAction, combineReducers, configureStore, ThunkAction } from '@reduxjs/toolkit';
import { createWrapper, HYDRATE } from 'next-redux-wrapper';
import { getMovies } from "./Reducer/movieReducer";

const combinedReducer = combineReducers({
    counter: getMovies
});

const reducer = (state: ReturnType<typeof combinedReducer>, action: AnyAction) => {
    if (action.type === HYDRATE) {
        const nextState = {
            ...state,
            ...action.payload,
        };
        return nextState;
    } else {
        return combinedReducer(state, action);
    }
};

export const makeStore = () => configureStore({ reducer }); //The issue lies here in the reducer

type Store = ReturnType<typeof makeStore>;

export type AppDispatch = Store['dispatch'];
export type RootState = ReturnType<Store['getState']>;
export type AppThunk<ReturnType = void> = ThunkAction<
    ReturnType,
    RootState,
    unknown,
    Action<string>
>;

export const wrapper = createWrapper(makeStore); 

The line causing the error is-

export const makeStore = () => configureStore({ reducer });

You can refer to the following image for a clearer understanding of the error- https://i.sstatic.net/1ZevS.png

Your assistance is much needed and appreciated. I have been stuck on this for over a month now without finding a solution. Please help me. Thank you.

Answer №1

Each reducer must be callable with undefined.

To address this issue, follow these steps:

const reducer = (state: ReturnType<typeof combinedReducer>, action: AnyAction) => {

However, I prefer to use the following syntax:

const reducer: typeof combinedReducer = (state, action) => {

instead.

Answer №2

Do you think there is an issue occurring in the application?

From my perspective, it seems like Typescript is struggling to recognize that your reducer is actually of type Reducer.

By adding the following code snippet, the error vanishes: https://i.sstatic.net/RwjyO.png

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 CORS error while attempting to initiate a Github API call on my Next App

I'm currently developing a Next.js React app with TypeScript and I am wondering if I need a server to make requests to the GitHub API. In my next.config.mjs file, as shown below, the only task my app needs is to fetch content from a file in a public r ...

Next.js is displaying an error message indicating that the page cannot be properly

Building a Development Environment next.js Typescript Styled-components Steps taken to set up next.js environment yarn create next-app yarn add --dev typescript @types/react @types/node yarn add styled-components yarn add -D @types/styled-c ...

Warning: Potential spacing issues when dynamically adjusting Material UI Grid using Typescript

When working with Typescript, I encountered an error related to spacing values: TS2322: Type 'number' is not assignable to type 'boolean | 7 | 2 | 10 | 1 | 3 | 4 | 5 | 6 | 8 | "auto" | 9 | 11 | 12'. No lint errors found Version: typesc ...

Tips for integrating withPlugins into your internationalization configuration in a next.config.js file

I'm currently working on my next.config.js file, where I have the following code: const withPlugins = require('next-compose-plugins'); const optimizedImages = require('next-optimized-images'); module.exports = withPlugins([optimiz ...

The issue TS2305 arises when trying to access the member 'getRepositoryToken' from the module "@nestjs/typeorm" which is not exported

Recently, I've been exploring the world of Nestjs and TypeOrm packages, but I've stumbled upon a series of TS errors that have left me perplexed. While I've managed to resolve many of them, there's one persistent error that continues t ...

Encountered an issue during deployment with Vercel: The command "npm run build" terminated with exit code 1 while deploying a Next.js web application

I've been working on a local Next.js app, but encountered an error when deploying it. Vercel Deployment Error: Command "npm run build" exited with 1 Here is the log from the build process: [08:26:17.892] Cloning github.com/Bossman556/TechM ...

How can you ensure that only one dropdown is active at a time while keeping others inactive in a React component

I'm currently working on implementing a dropdown navigation feature. The goal is to ensure that only one dropdown remains open at a time when clicked, and all others should close automatically. However, I've run into an issue where both dropdowns ...

The SSR Next.js <Head> tag fails to render on the server side

import { getMeta } from '@/helpers/globalHelpers'; import Head from 'next/head'; import { useDispatch, useSelector } from 'react-redux'; import { increment, decrement, selectValue, bulkUpdate, reset } from '@/slicers/prop ...

Dealing with the error: "Error in checking the expression as it has been altered"

I have a dialog form where users can add new projects. I want to prevent the save buttons from being enabled until all required fields are filled in correctly. I have an isValid() function that handles this validation and it appears to be working properly. ...

The elements appear tiny while the resolution is excessively large on the Ionic mobile device

I recently finished developing an Ionic project and successfully compiled it for both iOS and Android. Surprisingly, everything seems to be working fine on Android devices but I am encountering issues on iOS and when viewing the project from Chrome's ...

What might be causing my observable to fail to return a value?

I'm currently utilizing an API known as ngx-pwa localstorage, which serves as a wrapper for an indexeddb database. Within my Angular project, I have a service that interacts with this database through a method called getItem: getItem(key: string) { ...

Having trouble with the react event handler for the renderedValue component in Material UI?

I am facing an issue while trying to utilize the onDelete event handler within the chip component using Material UI in the code snippet below. Upon clicking on the chip, it triggers the Select behavior which opens a dropdown menu. Is there a way to modif ...

What are the consequences of relying too heavily on deep type inference in React and Typescript?

In the process of migrating my React + Javascript project to Typescript, I am faced with preserving a nice unidirectional flow in my existing code. The current flow is structured as follows: 1. Component: FoobarListComponent -> useQueryFetchFoobars() 2 ...

Problem encountered with @HostListener

In an Angular component, I have the following code snippet that is functioning as intended: @HostListener('document:click', ['$event']) onClick(event) { if(!this.eRef.nativeElement.contains(event.target)) { console.log("clicked out ...

Webpack: The command 'webpack' does not exist as a recognized cmdlet, function, script file, or executable program

Attempting to set up a new project using webpack and typescript, I have created the project along with the webpack file. Following the instructions on the webpack website, I successfully installed webpack using npm install webpack webpack-cli --save-dev ...

Error: Conversion of "2018-01-01-12:12:12:123456" to a date is not possible for the 'DatePipe' filter

<td>{{suite.testSuiteAttributes && suite.testSuiteAttributes.modifiedTimestamp | date: 'yyyy-MM-dd' }} </td> I am trying to display the date in the "05-Feb-2018 11:00:00 PM CST" CST format, but I keep getting an ...

Can a map key value be converted into a param object?

I have a map containing key-value pairs as shown below: for (let controller of this.attributiFormArray.controls) { attributiAttivitaMap.set(controller.get('id').value, { value: controller.get('valoreDefault').value, mandatory ...

Failure to nest interfaces in Angular when mapping JSON responses

After calling my ASP.NET Core Web API, the JSON response appears as: [ { "driver": { "firstName": "TEST", "lastName": "LAST", "assignedRoute": "O_ROUTE" } }, { "driver": { "firstName": "First", "lastName": " ...

Expanding a JSON data structure into a list of items

In my Angular service script, I am fetching customer data from a MongoDB database using Django: getConsumersMongodb(): Observable<any> { return this.httpClient.get(`${this.baseMongodbApiUrl}`); } The returned dictionary looks like this: { &q ...

I am looking to dynamically print countries from an array in my code based on the selected option

I'm in need of some simple code assistance. I want to display a list of countries that correspond to a selected letter, but I'm struggling to do so dynamically at the moment. For example, if I select the letter A from a dropdown menu, I want the ...