Typescript combineReducers with no overload

There seems to be an issue with my reducers, specifically with the combineReducers function. While it may be something obvious that I am missing, I keep encountering an error.

export default combineReducers<ConfigCategoryState>({
  tree: treeReducer(),
  });

The error message I receive is as follows:

No overload matches this call.
No overload matches this call.
  Overload 1 of 3, '(reducers: ReducersMapObject<ConfigCategoryState, any>): Reducer<CombinedState<ConfigCategoryState>, AnyAction>', gave the following error.
    Type 'Reducer<CategoryTree, Action<any>>' is not assignable to type 'Reducer<CategoryTree, any>'.
      Types of parameters 'state' and 'state' are incompatible.
        Type 'CategoryTree | undefined' is not assignable to type 'CategoryTree'.
          Type 'undefined' is not assignable to type 'CategoryTree'.
  Overload 2 of 3, '(reducers: ReducersMapObject<ConfigCategoryState, AnyAction>): Reducer<CombinedState<ConfigCategoryState>, AnyAction>', gave the following error.
    Type 'Reducer<CategoryTree, Action<any>>' is not assignable to type 'Reducer<CategoryTree, AnyAction>'.
      Types of parameters 'state' and 'state' are incompatible.
        Type 'CategoryTree | undefined' is not assignable to type 'CategoryTree'.
          Type 'undefined' is not assignable to type 'CategoryTree'.ts(2769)
types.ts(35, 3): The expected type comes from property 'tree' which is declared here on type 'ReducersMapObject<ConfigCategoryState, any>'
types.ts(35, 3): The expected type comes from property 'tree' which is declared here on type 'ReducersMapObject<ConfigCategoryState, AnyAction>' 

Below is the reducer causing this issue:

const isLoadingReducer = () =>
  buildReducer<boolean>(true)
    .handle(initCategoryTree, () => false)
    .done();

Additionally, here is the corresponding action:

export const initCategoryTree = createAction<CategoryTree, CategoryTree>(
  "INIT_CATEGORY_TREE",
  (tree) => tree
);

I am unsure if there is anything else missing in my setup. While this error is present in all of my reducers, I have only included one for brevity. I am aware that buildReducer requires a function rather than a function invocation, and removing brackets in combineReducers does not resolve the issue.

Answer №1

The issue lies in the fact that you are invoking treeReducer() instead of supplying a reference to the treeReducer function.

Simply remove the parentheses, and the solution will be accurate.

Furthermore, avoid passing generic type arguments. The correct type can be inferred by combineReducers. In fact, it is advisable to derive the root state type from the root reducer:

const rootReducer = combineReducers({
  tree: treeReducer
});

type RootState = ReturnType<typeof rootReducer>;

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

Having trouble locating the export in the TypeScript module

Having a situation where there is a file with an exported object: let btypes:{[key:string]:any} = { "key1":val, //... } export {btypes} I even attempted to use export default btypes Upon importing it using: import {btypes} from "../types& ...

Create a combined string from a structure resembling a tree

In my web application, I have a type that defines the different routes available: interface IRoute { readonly path: string, readonly children?: IRoute[] } I want to create a union type containing all possible paths based on an IRoute object. Let&apos ...

When receiveMessage is triggered, the FCM push notification fails to refresh the view

After following this helpful tutorial on Push Notifications with Angular 6 + Firebase Cloud Messaging, everything is working perfectly. I am able to receive notifications when using another browser. To ensure that my notification list and the length of no ...

Upgrade from Next.js version 12

Greetings to all! I have recently been assigned the task of migrating a project from next.js version 12 to the latest version. The changes in page routing and app routing are posing some challenges for me as I attempt to migrate the entire website. Is ther ...

Does moment/moment-timezone have a feature that allows for the conversion of a timezone name into a more easily comprehendible format?

Consider this example project where a timezone name needs to be converted to a more readable format. For instance: input: America/Los_Angeles output: America Los Angeles While "America/Los_Angeles" may seem human-readable, the requirement is to convert ...

What is the process by which Angular 2 handles imports?

Currently diving into the world of Angular2 with TypeScript. I understand that SystemJS is crucial for enabling the import feature, like this example: import { bootstrap } from "angular2/platform/browser"; While this all makes sense, I find myself questi ...

What drawbacks come with incorporating a single large React component into a project?

What are the drawbacks of using a single large React component? While I am well-versed in webpack, browserify, AngularJS, ES6, NPM, and other similar web frameworks, I am new to React. I intend to build a one-page app in React without any testing require ...

When assigning JSON to a class object, the local functions within the class became damaged

This is a demonstration of Object Oriented Programming in JavaScript where we have a parent Class called Book with a child class named PriceDetails. export class Book { name: String; author: String; series: String; priceDetails: Array<Price> ...

How to toggle element visibility when hovering in Angular?

I've set up an angular material card that includes a close button (marked with an "x"). My goal is to initially hide the "x" button and only display it when hovering over the card. Here is the code snippet for the card: <mat-card> <mat- ...

Angular - Best practices for exchanging feedback between sibling components

The title may not be the most descriptive, but I struggled to find a better way to convey my issue. I've encountered a problem multiple times while working with angular. To illustrate, let's consider this scenario: Imagine having a main compone ...

Fetching server-side data for isomorphic React app: A guide to accessing cookies

Currently, I am in the process of developing an isomorphic/universal React + Redux + Express application. The method I use for server-side data fetching is quite standard: I identify the routes that match the URL, call the appropriate data-fetching functio ...

Can type information be incorporated during compilation?

Consider the code snippet below: function addProperties(keys: String[]): Object { // For illustration purposes, this is a specific return return { firstProperty: "first_value", secondProperty: "second_value" }; } export defaul ...

Troubleshooting the issue with default useAsDefault routing in Angular 2

I have implemented Angular 2 for routing and Node for local hosting. However, I encountered an issue where using 'useAsDefault:true' for my route caused the nav bar links to stop functioning properly. The URL would redirect to http://localhost/ ...

Modifying app aesthetics on-the-fly in Angular

I am currently working on implementing various color schemes to customize our app, and I want Angular to dynamically apply one based on user preferences. In our scenario, the UI will be accessed by multiple clients, each with their own preferred color sch ...

Here is an example showcasing how to use Angular 2 to make an

How can I correctly retrieve json data from an http get request in Angular 2? Currently, I am working on testing some local data with a mocked endpoint. Although I am able to see the result in the http.get() method, I am facing issues when trying to assign ...

Learn how to alter the website's overall appearance by changing the background or text color with a simple click on a color using Angular

Is there a way to dynamically change the background color or text color of the entire website when a user clicks on a color from one component to another? I know I need to use the Output decorator, but how can I implement this? style.component.html <di ...

The property you are trying to access is not found within the declared type of 'IntrinsicAttributes & { children?: ReactNode; }'

In my React project created using Create-React-App, I have included the following packages (relevant to the issue at hand): "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "typescript": "^3.9.2", "@typ ...

Exploring Cypress Component Testing within a NextJS project

Could someone assist me with understanding how to utilize the cypress plugin for nextJS in order to execute Cypress Components Test package.json "devDependencies": { "@cypress/react": "^5.3.4", "@cypress/webp ...

I encountered an error while trying to deploy my next.js project on Vercel - it seems that the module 'react-icons/Fa' cannot be found, along with

I'm currently in the process of deploying my Next.js TypeScript project on Vercel, but I've encountered an error. Can someone please help me with fixing this bug? Should I try running "npm run build" and then push the changes to GitHub again? Tha ...

Variable Scope is not defined in the TypeScript controller class of an AngularJS directive

I have implemented a custom directive to wrap ag grid like so: function MyDirective(): ng.IDirective { var directive = <ng.IDirective>{ restrict: "E", template: '<div style="width: 100%; height: 400px;" ag-grid="vm.agGrid ...