CODEWITHSUNDEEP
angularngrx-storengrx-effects
emery.noel
emery.noel

Reputation: 1185

Ngrx Pattern to set propery IsLoading while fetching new data from server

I have a store with actions, effects, reducers, and selectors. I have a component on the screen, and the component represents a store object, obtained via a selector.

What I'm trying to do is, I think, 2 things with 1 action. When a user updates the object, I want to dispatch an action to update the store object to set an isLoading property to true (which will re-emit to my component, which will respond to isLoading by blocking the UI). Meanwhile, I want an effect to save/refetch from the server. When the effect completes, it will dispatch the object back to the store with isLoading = false, which my UI would respond to by updating its fields and unblocking the UI.

How do I achieve both an effect and a reducer, and guarantee the order in which they return? Or is there a better pattern to use?

Upvotes: 0

Views: 39

Answers (1)

Volodymyr Usarskyy
Volodymyr Usarskyy

Reputation: 1287

How do I achieve both an effect and a reducer, and guarantee the order in which they return? Or is there a better pattern to use?

Execution order is guaranteed: https://github.com/ngrx/platform/issues/162 Effects will always execute after all reducers.

The flow you described is perfectly fine. I personally prefer a property status with possible values like 'loading' | 'loaded' | 'error' | ... but a simple boolean property isLoading is also okay.

Upvotes: 1

Related Questions