I'm trying to figure out how to set a specific value in the latest version of Ngrx. The docs mention how to increment/decrement/reset values in the store, but I didn't see any examples on how to dynamically set values or how to pass arguments to reducers.

This is what I have at the moment, but I know it's not correct:

My actions:

// TODO: properly implement action
export const setLabel = createAction('[Label Component] Set,  props<{ addressField: string }>()');

My reducer:

export interface AppState {
  addressField;
}

const _reducer = createReducer(
  // initial state:
  { addressField: '' },
  // TODO: update `addressField`:
  on(setLabel, state => {
    return {
      ...state
    };
  })
);

export function labelReducer(state, action) {
  return _reducer(state, action);
}

Finally, my ponent:

// imports...

export class MyComponent implements OnInit {
    constructor( private store: Store<AppState>,
                 private AddressService: AddressService) {
    }

    ngOnInit() {
        // TODO: update store state:
        this.AddressService.getFields().subscribe(x => {
            this.store.dispatch(setLabel({ addressField: x.addressLine }));
        });
  }
}

I'm trying to figure out how to set a specific value in the latest version of Ngrx. The docs mention how to increment/decrement/reset values in the store, but I didn't see any examples on how to dynamically set values or how to pass arguments to reducers.

This is what I have at the moment, but I know it's not correct:

My actions:

// TODO: properly implement action
export const setLabel = createAction('[Label Component] Set,  props<{ addressField: string }>()');

My reducer:

export interface AppState {
  addressField;
}

const _reducer = createReducer(
  // initial state:
  { addressField: '' },
  // TODO: update `addressField`:
  on(setLabel, state => {
    return {
      ...state
    };
  })
);

export function labelReducer(state, action) {
  return _reducer(state, action);
}

Finally, my ponent:

// imports...

export class MyComponent implements OnInit {
    constructor( private store: Store<AppState>,
                 private AddressService: AddressService) {
    }

    ngOnInit() {
        // TODO: update store state:
        this.AddressService.getFields().subscribe(x => {
            this.store.dispatch(setLabel({ addressField: x.addressLine }));
        });
  }
}

• javascript
• angular
• redux
• ngrx

• There are multiple ways to create an action. Using the props should allow you to pass dynamic data to the reducers. – Andrei Gătej Commented Jun 25, 2020 at 17:56
• @AndreiGătej, the link is broken... – John Spiteri Commented Apr 7, 2021 at 4:31
• 1 @JohnSpiteri Thanks, here's the updated link. – Andrei Gătej Commented Apr 7, 2021 at 8:13

2 Answers 2

actions.ts

export enum ActionTypes {
  SetLabel = '[Label Component] Set'
}
export const SetLabel = createAction(ActionTypes.SetLabel, props<{ addressField: string }>());

reducer.ts

export interface AppState {
  addressField;
}

export initialState: AppState = {
  addressField: ''
}

const _reducer = createReducer(
  initialState,
  on(SetLabel, (state, { addressField }) => {
    return {
      ...state,
      addressField
    };
  })
);

Your ponent is fine, better to use Effects when dealing with Side Effects (async data)

  on(setLabel, state => {
    return {
      ...state,
      propToUpdate: 'foo'
    };
  })

  on(setLabel, (state, action) => {
    return {
      ...state,
      propToUpdate: action.propToSet
    };
  })

See the spread syntax for more info.

Or, just use ngrx-etc

const entityReducer = createReducer<{ entities: Record<number, { id: number; name: string }> }>(
  {
    entities: {},
  },
  mutableOn(create, (state, { type, ...entity }) => {
    state.entities[entity.id] = entity
  }),
  mutableOn(update, (state, { id, newName }) => {
    const entity = state.entities[id]
    if (entity) {
      entity.name = newName
    }
  }),
  mutableOn(remove, (state, { id }) => {
    delete state.entities[id]
  }),
)