NGXS - Good Practices: Passing service required params in action or getting it from state?

Question

When handling a dispatched action, the state need some params to pass to the service such as the ID of the resource in order to perform the action. How should I get these params?

1. From the state:

  @Action(AddCartItem)
  addCartItem({ getState, patchState }: StateContext<CartStateModel>, { item }: AddCartItem) {
    const cartId = getState().cartId;
    return this.service.addCartItem(cartId, item).pipe(
      tap(item => patchState({ /* [...] */ })),
    );
  }

Pros:

• No need for a selector for these params in the dispatching component
• Less coupling (i.e. no need to change components if one of these params change)

Cons:

• Less visibility in actions (i.e. missing infos)

---

2. From the action:

  @Action(AddCartItem)
  addCartItem({ getState, patchState }: StateContext<CartStateModel>, { cartId, item }: AddCartItem {
    return this.service.addCartItem(cartId, item).pipe(
      tap(item => patchState({ /* [...] */ })),
    );
  }

Pros:

• Pure
• Better visibility in actions

Cons:

• Need for a selector in the dispatching component
• More coupling

---

In my opinion, option 2 looks better, but am I missing something? Is option 2 can cause unwanted side effects?

Answer 1

Don't couple your actions to the current state, because you might not be able replay the action, skip actions or rollback actions using a Redux debugger.

It's better if your actions are incremental movements in the change of the state from the previous state, and do not directly depend upon the previous state.

It also makes testing more difficult, because now the unit test needs to know more about the pre-existing state to test the action. If the action contains more information in the payload, then the test conditions are easier to set up.