What is the process for updating or pushing state in NgRx?

Question

What is the process for updating or pushing state in NgRx?

Need help with updating the state after adding inputVal. Currently, it only works on the first click and throws this error:

Error:

TypeError: Cannot add property 1, object is not extensible

import { createReducer, on } from '@ngrx/store'
import { addTodo } from '../actions/todo.actions'

export const initialState: any[] = []
let test: any[] = []

const _todoReducer = createReducer(
  initialState,
  on(addTodo, (state: any, { inputVal }) => {
    test.push(inputVal)
    state = test
    return state
  })
)

export function todoReducer(state, action) {
  return _todoReducer(state, action)
}

Any suggestions on how to push or update state in NgRx? Or if not possible, what are some workarounds?

javascript angular typescript ngrx ngrx-store

Answer 1

Answer №1

When working with NgRx, it is important to note that you cannot directly modify the state. Instead, the reducer will generate a new copy of the state every time changes are made. This means that you cannot simply add test directly to the state.

A possible solution:

const _todoReducer = createReducer(
  initialState,
  on(addTodo, (state: any, { inputVal }) => {
    return [...state, inputVal] // By creating a new array, we can update the state accordingly.
  })
)

Answer 2

When working with NgRx, it is important to note that you cannot directly modify the state. Instead, the reducer will generate a new copy of the state every time changes are made. This means that you cannot simply add test directly to the state.

A possible solution:

const _todoReducer = createReducer(
  initialState,
  on(addTodo, (state: any, { inputVal }) => {
    return [...state, inputVal] // By creating a new array, we can update the state accordingly.
  })
)

Answer 3

Answer №2

Take this scenario into consideration: within your component, make sure to inject the Store by using

constructor(private store:Store){..}

To update the Store, use

this.store.dispatch(addTodo("element"))

However, there is a crucial issue at hand. Your Store must be immutable, meaning you cannot simply reuse the test array in the reducer.

const _todoReducer = createReducer(
  initialState,
  on(addTodo, (state: any, { inputVal }) => {
    return [...state, inputVal]
  })
)

This solution should suffice.

Answer 4

Take this scenario into consideration: within your component, make sure to inject the Store by using

constructor(private store:Store){..}

To update the Store, use

this.store.dispatch(addTodo("element"))

However, there is a crucial issue at hand. Your Store must be immutable, meaning you cannot simply reuse the test array in the reducer.

const _todoReducer = createReducer(
  initialState,
  on(addTodo, (state: any, { inputVal }) => {
    return [...state, inputVal]
  })
)

This solution should suffice.

What is the process for updating or pushing state in NgRx?

Answer №1

Answer №2

Similar questions

Ways to effectively test a custom hook event using Enzyme and Jest: A guide on testing the useKeyPress hook

Mutations are not set up in the schema

Get a document from a NodeJS Server with the help of Express

Detecting slopes using THREE.js

How can data be shared between two functional child components in a React application?

JavaScript's utilization of local variables and callback functions enables developers to enhance the

Columns that can be resized in a right-to-left (

TypeORM's Polymorphic Relationship fails to retrieve data from the parent entity

Steps for executing Mocha tests in a specified sequence

Is it possible for an Angular App to function as an authenticated user for a real-time database?

Monitor changes in the select tag to display the updated value and output

javascript issue with Q promise not passing complete parameters

Is there a way to send a request before opening a new page that doesn't involve using synchronous XMLHttpRequest on the main thread, which is

Ways to organize class and interface files within the same namespace in TypeScript

Verify the dimensions of the window, either width or height

What could be causing AJAX to consistently return identical data to the callback function when distinct objects are supplied as arguments?

One way to display GIFs sequentially without preloading them is by using JavaScript

Reference error in Angular 2 typings is not defined

Trouble with CSS loading in Node.js with express.static

What is the best way to remove all attributes from one interface when comparing to another?