Initial state was not properly set for the reducer in TypeScript

Encountered an error while setting up the reuder:

/Users/Lxinyang/Desktop/angular/breakdown/ui/app/src/reducers/filters.spec.ts
(12,9): error TS2345: Argument of type '{}' is not assignable to parameter of type '{ selectionState: { source: string; timeRange: Date[]; }; } | undefined'.
  Type '{}' is not assignable to type '{ selectionState: { source: string; timeRange: Date[]; }; }'.
    Property 'selectionState' is missing in type '{}'.

Here's the code snippet for the reducer:

const DATE_IN_MILLISECONDS = 60 * 60 * 24 * 1000
const todayDate = new Date()
const startDate = new Date(todayDate.getTime() - 6 * DATE_IN_MILLISECONDS)
const defaultFiltersState = {
  selectionState: { source: 'all', timeRange: [startDate, todayDate] }
}

export function filters(state = defaultFiltersState, action: any) {}

Puzzled by this issue as I never assign {} to the default state.

The combined root code looks like this:

export default combineReducers({ dataSource, filters, filtersVideo })

Answer №1

The main factor is that I initialized a blank {} state when setting up the store.

const setupStore = (initialState: any) => {
  return createStore(rootReducer, initialState, applyMiddleware(thunk))
}

During app initialization,

const myStore = setupStore({})

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

Exploring the possibilities of developing WebComponents within Angular using TypeScript

My Angular application was originally created using the default method with ng new project-name". However, for performance reasons, I had to incorporate single standard WebComponents. The JavaScript code associated with these components is stored in a ...

React Typescript: exploring the power of dynamic types

Can dynamic typing be implemented? The JSON structure I am working with looks like this: { "fieldName": "Some text", "type": String, "inputType": "text" }, { "fieldName": "Some bool&q ...

Too many open files error encountered in Watchpack (watcher) - NextJS

Encountering an issue with watchpack resulting in the error messages shown above while running a next app using next dev. The error message is displayed continuously on the screen as follows: Watchpack Error (watcher): Error: EMFILE: too many open files, w ...

Access basePath within the Next.js AppRouter

Is there a way to access the basePath in Next.js 13 when using AppRouter? To retrieve it, we can simply get router.basePath through the useRouter hook of PageRouter by importing `import { useRouter } from 'next/router' I am currently unable to ...

Unleashing the power of dynamic data imports in a Node.js application

My goal is to utilize the require function in a node/express application with typescript to import a json file. Here's how I attempted it: const url = `./data/${resource}.json`; const data = require(url); However, I encountered the error Cannot find ...

Having trouble with @viewChild not activating the modal popup and displaying an error message stating that triggerModal is not a function in

I am facing an issue where the click event is not being triggered from the parent component to display a Bootstrap 3 modal. I am getting the following error: ERROR TypeError: this.target.triggerModal is not a function This is what I have done so far: Pa ...

Problems with the zoom functionality for images on canvas within Angular

Encountering a challenge with zooming in and out of an image displayed on canvas. The goal is to enable users to draw rectangles on the image, which is currently functioning well. However, implementing zoom functionality has presented the following issue: ...

Struggling to increment the badge counter in a React Typescript project

I'm a bit unsure about where to apply the count in my Badge Component. The displayValue should include the count, but I'm struggling with how to implement it. UPDATE: The counter is now in place, but when I decrease the count and it reaches 0, t ...

Tips for effectively utilizing URLSearchParams in Angular 5 HttpClient's "get" function

When working with Angular 4.2, I used the Http service and made use of the get method by passing in a URLSearchParams object as the search parameter: this.http.get(url, {headers: this.setHeaders(), search: params}) Now I am looking to upgrade to Angular ...

Tips for customizing the main select all checkbox in Material-UI React data grid

Utilizing a data grid with multiple selection in Material UI React, I have styled the headings with a dark background color and light text color. To maintain consistency, I also want to apply the same styling to the select all checkbox at the top. Althou ...

Angular 6: Exploring the Challenges of Extending Services Without Sacrificing the Functionality of ChildService

As I was developing multiple angular REST-services for my frontend, I came up with the idea of creating a base class BaseRestService to handle common functionalities like headers and helper functions. However, I encountered TypeErrors when trying to call ...

Steps for transitioning from a mapped type to a discriminated union

Forgive me if this question has already been posed. I made an effort to search for a solution, but it seems I may not be using the correct terms. The issue arises with this particular structure. It involves a simple mapped type: type Mapped = { squ ...

The NX Monorepo housing a variety of applications with unique design themes all utilizing a single, comprehensive UI component

We are currently working on a design system for a NX monorepo that has the potential to host multiple apps (built using Next.js), all of which will share a common component library. While each app requires its own unique theme, the UI components in the lib ...

Debug errors occur when binding to computed getters in Angular 2

Currently, I am integrating Angular 2 with lodash in my project. Within my model, I have Relations and a specific getter implemented as follows: get relationsPerType() { return _(this.Relations) .groupBy(p => p.Type) .toPairs() ...

How to efficiently update a child component in React using UseState and establish a connection back to the parent component

I am currently working on developing a prototype for a master/detail scenario in React and Material-UI. The task involves creating a basic list of objects with the ability to edit and save an item using a dialog. While I have successfully updated the visit ...

Immediate update: Receiving a status of 400 "Bad request" when trying to make an HTTPPOST

After tirelessly searching through various online resources like Google and Stack Overflow to troubleshoot my code without success, I find myself resorting to posting a question here. The issue at hand involves two nearly identical functions in my service ...

Tips for implementing dynamic properties in TypeScript modeling

Is there a way to avoid using ts-ignore when using object properties referenced as strings in TypeScript? For example, if I have something like: const myList = ['aaa', 'bbb', 'ccc']; const appContext = {}; for (let i=0; i< ...

MERN stack project encountering PUT 401 Unauthorized error despite passing Bearer token

After successfully integrating the Razorpay payment gateway into my e-commerce website, I encountered an issue where a failure action was dispatched instead of a success action right after the payment process. The error message indicated that it was 401 un ...

Tips on efficiently adding and removing elements in an array at specific positions, all the while adjusting the positions accordingly

My challenge involves an array of objects each containing a position property, as well as other properties. It looks something like this: [{position: 1, ...otherProperties}, ...otherObjects] On the frontend, these objects are displayed and sorted based on ...

What function is missing from the equation?

I am encountering an issue with an object of type "user" that is supposed to have a function called "getPermission()". While running my Angular 7 application, I am getting the error message "TypeError: this.user.getPermission is not a function". Here is w ...