1

I have a users list and I want to be able to update each user's details (in a modal) and keep them in the state(no API call for update). I'm trying to do this with effects but I'm not sure what is the correct way to achieve it.

Actions:

Reducer:

User details

enter image description here

marf
  • 13
  • 3

1 Answers1

2

You don't need an effect if you don't need to make an API request (or if there's no side effect). In your case, the modal dispatches an action, and the reducer listens to that action and updates the state.

timdeschryver
  • 14,415
  • 1
  • 19
  • 32
  • thanks. So on the form submit I need to call the action right? onSubmit(): void { const user = this.form.value as User; this.store.dispatch(editUser(user)); } I'm getting an error Argument of type 'User' is not assignable to parameter of type '{ user: User; }'. – marf Mar 30 '22 at 16:38
  • ` this.store.dispatch(editUser({user})); ` because `user` is property on the action with with `props<{ user: User}>` – timdeschryver Mar 30 '22 at 16:49
  • Thank you error is gone, but unfortunately, the state is not updated after changes. I got stuck on this for hours, any ideas how to solve it? onSubmit(): void { const user = this.form.value as User; this.store.dispatch(editUser({ user })); } – marf Mar 30 '22 at 17:14
  • The action should now be received by the reducer, in which you can update the state. Make sure that the action is handled by the reducer. – timdeschryver Mar 30 '22 at 17:39
  • Got it, thanks. Now I'm facing another issue, after the update if I refresh the page the state loads the initial users. How I can display the latest state? – marf Mar 30 '22 at 18:35
  • That isn't what ngrx has built-in because it hold state in-memory. You can persist to localstorage for example and rehydrate on refresh. – timdeschryver Mar 31 '22 at 05:51