CODEWITHSUNDEEP
angularngrxngrx-storengrx-effectsangular-ngrx-data
Lucky Gore
Lucky Gore

Reputation: 17

how to pass custom value in ngrx

this is .ts file where addValue() got error as : Expected 0 arguments, but got 1


  value: any
  name: string = ''

  constructor(private store: Store<{ counter: CounterState }>) {

  }
  ngOnInit() {

    // this.store.select(getCounter).subscribe(data=> {

    //   console.log("counter observable is called");
    //   // this.name = data
    // })

    //  ********** alternavtive to subsctibe is obersvable 

  }
  addValue() {
    console.log(this.value);
    this.store.dispatch(customIncreament({value: this.value}))

  }

I have tried above example in my new project. I have check lot of examples on internet to resolve the problem but nothing is worked with it. I think there is more things needs to add which I have missed with my code

.actions file

import { createAction, props } from "@ngrx/store";
import { CounterState } from "./counter.state";

export const increment = createAction('increment');
export const decrement = createAction('decrement');
export const reset = createAction('reset');

// creating the action for custome value to be used in counter
export const customIncreament = createAction(
    'customIncreament', props<{counter:number}>);

.reducer

import { state } from "@angular/animations";
import { createReducer, on } from "@ngrx/store";
import { changeNameAction, customIncreament, decrement, increment, reset } from "./counter.actions";
import { inititalState } from "./counter.state";

const _counterReducer = createReducer(inititalState,
    on(increment, (state: any) => {
        return {
            ...state,
            counter: state.counter + 1,
        };
    }),
    on(decrement, (state: any) => {
        return {
            ...state,
            counter: state.counter - 1,
        };
    }),

    on(reset, (state: any) => {
        return {
            ...state,
            counter: 0,
        };
    }),
    on(customIncreament, (state, counter) => {
        console.log(counter);
        return {
            ...state,
            counter: state.counter 
        }
    }),

and state:

export interface CounterState{
    
    counter: number,
    name: string
}

export const inititalState : CounterState= {
    counter: 5,
    name: 'anemoi'
}

Upvotes: 0

Views: 590

Answers (2)

Lucky Gore
Lucky Gore

Reputation: 17

its an syntax error from me,

export const customIncreament = createAction(
    'customIncreament', props<{counter:number}>);

updated code :

export const customIncreament = createAction(
    'customIncreament', props<{counter:number}()>);

need to add () to props<>()

Upvotes: 1

Haris Bouchlis
Haris Bouchlis

Reputation: 2566

The problem is that the customIncrement action expects an argument with a key counter but you are passing one with a key of value. If you update your code in the component where the action is dispatched to this:

addValue() {
  console.log(this.value);
  this.store.dispatch(customIncreament({counter: this.value}))
}

it will work as expected.

Upvotes: 0

Related Questions