Ngrx reducer is failing to trigger even when the state is accurately configured

I am working with a basic state structure:

{
 items: Item[]
 selectedItems: string[]
}

In my application, I have a list of items with checkboxes. When I select an item, the list state is updated to include that item in the selected items array. However, I encounter an issue when I navigate deeper into an item for editing.

After editing an item and returning to the list view, I can still see the correct state with the previously selected items intact. But when I attempt to deselect an item, the reducer does not seem to update the state as expected.

The reducer function responsible for updating the selection looks like this:

on(addItemToSelection, (state, { id, checked }) => ({
    ...state,
    selectedItems: checked ? [...state.selectedItems, id] : state.selectedItems.filter((itemId) => itemId !== id)
})

Answer №1

In cases where selectedItems is a Type String[], the following code will not function correctly:

state.selectedItems.filter((item) => item.id !== id)

This is because there is no property named 'id' on your selectedItems, which is simply a String array.

Instead, consider using:

state.selectedItems.filter((item) => item !== id)

UPDATE:

I have tested your code on Stackblitz and it appears to be working correctly.

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

Enhancing the default functionality of React.FC within Next.js

Currently, I am working on a tutorial in Nextjs that employs the code snippet below in JavaScript. However, I am planning to transition it to TypeScript. Since I am relatively new to TypeScript, I have attempted various solutions from different sources but ...

What is the best approach for creating routes with parameters of varying lengths?

Due to the structure of the website's url, the parameters will vary, making it impossible to set a fixed number of parameters. How can we modify the app-routing.module.ts file to accommodate this? url => /products/cat1/cat2/cat3/cat4 ... const rou ...

How does Angular2 indicate the modification in a segment of Component?

ReactJs utilizes virtual DOM for rendering changes, whereas Angular2 does not have a virtual DOM. However, Angular2 is reactive similar to ReactJS. In Angular2, with any change, the whole component does not need to be modified, only the portion of the co ...

Eliminate the "email address" input field from Stripe checkout in Angular 2

I am currently using Angular 2 for my project and need some help. Is there a way to remove the email address field from Stripe checkout? https://i.stack.imgur.com/auf6C.png Thank you in advance! ...

Using jest-dom without Jest is definitely an interesting challenge that many developers may

Can anyone help me with extending Typescript interfaces? I have come across a situation that I am trying to solve. In my tests, I am utilizing expect without using Jest directly (I installed it separately and it functions properly). Now, I am interested ...

"Firebase function fails to return Typescript class variable, resulting in 'undefined'

Being someone with a background in python/golang, I am now delving into ionic2. There seems to be an issue that I can't quite figure out due to my current level of knowledge in this stack. Perhaps I just need a way to reference the outer scope of this ...

How can I utilize identical cucumber steps for both mobile and web tests while evaluating the same functionality?

In order to test our website and React Native mobile app, we have developed a hybrid framework using webdriver.io and cucumber.io. We currently maintain separate feature files for the same functionality on both the web and mobile platforms. For example, i ...

What is the purpose of specifying the props type when providing a generic type to a React functional component?

When utilizing the @typescript-eslint/typedef rule to enforce type definitions on parameters, I encountered an issue with generically typing a React.FC: export const Address: React.FunctionComponent<Props> = (props) => ( An error was thrown st ...

An issue arises when trying to group and sum an array of objects due to difficulty converting strings to arrays in TypeScript

Below is the provided code snippet: Definition of Interface - interface IWEXInterface { readonly Date?: string; "Exec Qty"?: string; readonly Expiry?: string; } Data Collection - let data: IWEXInterface[] = [ { Date: &qu ...

"Disabling Click Event on Sidebar Menu in Angular: A Step-by-Step Guide

I am working on an Angular project with a sidebar that I want to modify in order to disable click events on the menu items. My goal is to guide users through a specific flow without allowing them to navigate freely. However, simply disabling the [routerLin ...

Exploring methods of testing a simple React functional component using Jest, TypeScript, and type annotations

I have been struggling for a long time to find a straightforward example of how to test a simple react component using jest and typescript. Despite my efforts, I have not been successful in finding a solution. I have checked out: https://basarat.gitbooks.i ...

Mastering Inter-Composable Communication in Vue 3: A Guide

Composables in Vue documentation demonstrate how small composition functions can be used for organizing code by composing the app. Discover More About Extracting Composables for Code Organization "Extracted composables act as component-scoped servi ...

Utilize ngModel to access input files in the array

Within my form, there is a file upload input: <input type="file" [(ngModel)]="item.image" name="image" #image> Can I retrieve #image.files[0] using the ngModel item.image directly (without creating a reference)? If not, what exactly does ngModel s ...

What is the best way to organize an array both alphabetically and by the length of its elements?

Imagine I am working with an array like this: ['a', 'c', 'bb', 'aaa', 'bbb', 'aa']. My goal is to sort it in the following order: aaa, aa, a, bbb, bb, c. this.array= this.array.sort((n1, n2) => ...

Having trouble getting code hints to function properly with the official TypeScript plugin on Sublime Text 3

I am experiencing issues with getting code hinting to work using the official TypeScript plugin for Sublime Text 3 on Mac OSX 10.10.5 with Sublime 3. Despite installing it in the packages directory, I am unable to see any code hints. In accordance with th ...

Is it possible to set a form control value as an object and display its label within an input field?

I am working on a basic form that includes an input field with autocomplete using Angular Material components. The issue I am facing is that when I select a value from the autocomplete box, the input field displays [Object object] as the value instead of t ...

What are the steps to configure JSS in a TypeScript/NextJS application?

Trying to set up a basic web app using React, TypeScript, NextJS, and Material-UI has been quite the challenge. The main issue I am facing revolves around styling within my project. To better illustrate my problem, I have created a CodeSandbox environment. ...

Decoding the Mystery: What Do the + and # Symbols Mean in Angular 4 Routes?

Check out the repository at https://github.com/AngularClass/angular-starter https://i.sstatic.net/ITi80.png I noticed the use of + and # for referencing within loadChildren and naming conventions in the folder... After consulting the Angular documentati ...

The argument labeled as 'shop' does not fit the criteria for the parameter 'items' or 'cart'

I've been doing some research but haven't had any luck finding a solution. I'm fairly new to Angular and currently working on a webstore project. I followed a tutorial, but encountered an error along the way. import { select, Store } from & ...

Getting the mssql output in Protractor using VSCode

I recently tried running the code below and it seems like the connection is established successfully. However, I'm unable to see any output. Is there a way to view the query result? I am still learning about Protractor, NodeJS, and MSSQL connections. ...