How can NgRx be used to properly reset or empty an array within the state object?

What is the proper way to reset an array in an NgRx reducer?

I am using NgRx to create a basic reducer that includes an empty array called myArray in the initial state:

import * as MyActions from './my.actions';
const myState = {
    myValue: 'foo',
    myArray: []
}

In this scenario, I have an action named ARRAY_RESET which resets myArray to an empty array like this:

export function myReducer(
    state = myState,
    action: MyActions.MyActionTypes
) {
    switch(action.type) {
        case MyActions.ARRAY_RESET:
            return {
                ...state,
                myArray: []   <---- I RETURN AN EMPTY ARRAY
            };
        case MyActions.ARRAY_PUSH:
            return {
                ...state,
                myArray: [...state.myArray, action.payload]
            };
        default:
            return state;
    }
}

Would you consider this method to be correct?

Answer №1

Indeed, in order to reset or clear the array, we can simply assign it as a new empty array:

return {
  ...state,
  newArray: []   <---- SET AN EMPTY ARRAY AS THE NEW VALUE
};

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

What causes the `d-none` class to toggle on and off repeatedly when the distance between two div elements is less than 10 during window resizing?

My primary objective is to display or hide the icon based on the width of the right container and the rightButtonGroupWrapper. If the difference between these widths falls below 10, the icons should be shown, otherwise hidden. However, I'm facing an i ...

Tips for creating a phone number placeholder that stays in place on a form

I'm looking to display the phone number format as a placeholder in the input field, without it disappearing as the user types. The standard HTML placeholder disappears as the user starts typing. I want the placeholder to remain visible and guide the ...

Manage over 200 checkboxes by storing them in the state

I am facing an issue with managing checkboxes within a table in my application. The table fetches user data and renders each row as its own component, with each row containing a checkbox. The goal is to enable the users to select checkboxes and retrieve t ...

Choosing the image that represents your website in Safari web previews

Every time I check iCloud.com on my Safari top sites, the thumbnail is always the same. I'm curious about how I can automate this for my own website. ...

Tips for invoking a function from a different component in Angular?

I'm currently working on implementing a method call from one Angular component to another Inside one.component.ts, there is a task to verify if it's a day off export class CalendarComponent implements OnInit { isDayOfWeekDisabled(dayOf ...

Add additional characteristics to the current interface without needing to create a separate interface

Imagine I have an interface: interface Cat { name: string; age: number; color: string; } Now, I want to create an object with a new interface that extends partial Cat and adds new properties: interface MyCat extends Partial<Cat> { sex: " ...

How to extract parameters from an http get request in Node.js

Trying to handle an HTTP request in this format: GET http://1.2.3.4/status?userID=1234 I am unable to extract the parameter userID from it. Despite using Express, I am facing difficulties. Even when attempting something like the following, it does not yi ...

Crafting Functions That Can Be Typed from Factory Function

My goal is to create a generic function from a factory function that can be typed later. However, I am encountering an issue where I am required to define the return type of the factory function at the time of its definition: export type TypeFunction<T& ...

The Collada model in Three.js appeared completely dark until a mouse movement brought in some light

Recently, I've run into a peculiar issue while trying to display a collada model in three.js. It appears that there may be an error in the script logic, but I'm having trouble pinpointing it. The problem is that when the page first loads, the Col ...

Cropped portion of the captcha image located on the left side

edit: I manually adjusted cnv.width = this.width to 120 and it seems to be working. Upon closer inspection, I discovered that the image has both a rendered size and an intrinsic size. The width is 35 for rendered size and 40 for intrinsic size, which may e ...

Presenting the following solution to prevent encountering an undefined TypeError in React that may trigger unexpected bugs

While working with React, I encountered an undefined type error. To address this issue, I made a modification by adding || {} in the return statement. This solved the type error problem, but now there is a new bug where it displays an empty state even wh ...

Accessing the nested arrays within an ng-repeat loop

Can anyone help me figure out what I'm doing incorrectly here? I've fetched some data and passed it to a controller as 'productInfo'. While I can successfully load the data, I am encountering issues when trying to target specific valu ...

What is the best way to create several sets of a numerical field and a checkbox? (checkbox will deactivate a specific number field)

I'm having an issue with generating multiple pairs of a number field and a checkbox. When I click the checkbox, it should disable the number field. However, only the first pair seems to be working. Can anyone lend a hand? Here's the code snippe ...

I recently incorporated @angular/material into my project and now I am encountering a version compatibility issue

I am currently facing a versioning challenge in my Angular project. My goal is to operate on Angular 6, but despite trying various guides on how to reversion the project, I have been unsuccessful. Here is the output of my 'ng version' command: ...

Using an array.map inside a stateless component with React.createElement: the type provided is invalid

There is a component called BasicDetail in my code with the following structure: import React from "react"; import { Grid, Form } from "semantic-ui-react"; const BasicDetail = ({DetailData}) => { return( <div> <Grid.Ro ...

A guide on adding an option to a dropdown menu in HTML

I have a variable that stores a number. My goal is to dynamically add options to a select element based on the value of this variable. For example, if the variable equals 10, I need to append 10 options to the select element with each option displaying the ...

Setting up an Angular development environment without relying on the CLI framework

I've been diving into learning Angular and experimenting with demo apps, but I'm finding it difficult to get a clear understanding of how everything works and the underlying concepts. Most resources I come across emphasize using CLI for automatio ...

Formatting database values in `where` conditions for strings in TypeORM: A simple guide

I am trying to utilize TypeORM's "exist" method in order to check if a name has already been inserted into the database. My issue is that I cannot determine whether the name was inserted in uppercase or lowercase, leading to potential false validatio ...

What is the best method for retrieving values from a FlexiGrid?

I'm having trouble finding information on how to retrieve a cell's value from a flexigrid. My goal is to fetch the value of the third column for every checked item (each row has a checkbox). While I have a function that successfully gets the ro ...

Interactive multiple draggable items using Jquery

I have implemented basic JavaScript code in my project. One of the functionalities I created is a drag-and-drop system with an inventory feature. However, I encountered an issue where the current drag-and-drop system only works for one item at a time. M ...