Good Action Hygiene with NgRx Mike Ryan

What people said

Recommends MTJ · 2018-07 · Stack Overflow · on “Optional Router Params with @ngrx”

Nothing in ngrx says how you should implement this it's up to you. You could make ImmediateSearchAction and use debounce in SearchAction effect to transform it to immediate search. By doing this you can easily reuse existing reducers and still keep actions separated by context. What I would do: Create new UserInputSearchAction, ( this is the debounced one ) Create new UrlSearchAction, which maps via effect to SearchAction Make SearchAction immediate Recommended reading / videos: About ngrx lingo and examples [LINK] About action hygiene (why divide this into 3 actions) [this video]

Recommends kmb · 2019-02 · Stack Overflow · on “NGXS/Store Action naming reuseability”

Actions should capture events, not commands. Therefore you should create two actions, one for each location where the event happens. A great video on the topic is Good Action Hygiene by Mike Ryan [this video] It's for NgRx, but the same concepts apply to NGXS.

Recommends Nico · 2019-05 · Stack Overflow · on “Ngrx store organization”

I think this is a good video if you haven't seen it: [this video] to deal with separating your actions. Since that is where everything really starts.

Recommends Dmitriy Ivanko · 2019-09 · Stack Overflow · on “How to dispatch multiple ngrx actions at the same time”

Using an action to dispatch multiple other actions is bad practice, since this increases your application's complexity. As your app grows, it gets increasingly harder to debug actions and reason about their origin. This talk from Mike Ryan describes Good Action Hygiene with NgRx: [this video]

Recommends Thierry Falvo · 2019-11 · Stack Overflow · on “How to dispatch action after getting data w/subscribe”

The "possible" solution you mentioned looks fine. It's a good practice to keep your smart component (or container) simple, without too many business logic. It's why, I would suggest you to rename your action to "Load" or "InitView", "Open"... to better match the real action. (here initialization of view, or view opening...). In the future, you could imagine do more things (than just load user data...) when component is initialized. Your code inside component will stay simple with only one action dispatched. Business logic remains inside your effect. About that, have a look at this good conference from Mike Ryan : Good Action Hygiene with NgRx [this video] Then, it sounds perfectly good to use an

Recommends DevLoverUmar · 2019-12 · Stack Overflow · on “How to perform same state transitions for multiple actions in a Reducer”

I have created unique Actions for My App as per the suggestions of Mike Ryan in this video [this video] But I have some Actions causing the same state transitions. How to achieve the same state transition without by-passing the Best Practices i.e., calling a common Action for two different events? My Actions are export const rawSignalEditInplace = createAction( RawSignalsActionTypes.RAW_SIGNAL_EDIT_INPLACE, props<{ signal: RawSignal }>() ); export const rawSignalEdit = createAction( RawSignalsActionTypes.RAW_SIGNAL_EDIT, props<{ signal: RawSignal }>() ); My Reducer is on(rawSignalsActions.rawSignalEditInplace, (state, { signal }) => { return { ...state, selectedRawSignal: entitiesSelectors.select

Recommends wlf · 2022-01 · Stack Overflow · on “NGRX Action that depends on other observable(selector) values”

Your ngOnInit should only dispatch BankActions.GET_BANKS . It should not contain any subscribe s Use async pipe in template to subscribe to banks$ and balances$ loadBalances$ should be triggered by BankActions.LOGIN_SUCCESS , you can get the account ID and banks list from the store within the effect using withLatestFrom ( [LINK] ) Remove BankActions.GET_BALANCES Remove login$ from your component References Chaining Effects Refer to this article by @timdeschryver, one of the core devs for ngrx: [LINK] Also recommend Mike Ryans talk on 'Good Action Hygiene' [this video] where he mentions 'Reducers and Effects should be the decision makers'. Manual subscribes tweet by Ben Lesh (RxjS core dev) - scro

Recommends AliF50 · 2022-01 · Stack Overflow · on “Ngrx: How to simplify the definition of actions?”

I had the same question as you but I recommend creating new actions for every action for better debugging as the project grows. The simplification you have created can be good, I am not sure if it saves much though. Check out this video on the topic: [this video]

Recommends JHizzal · 2022-05 · Stack Overflow · on “How do I apply good action hygiene for NGXS actions that can allow for easier maintenance”

The following is stated for action naming within NGXS's documentation [LINK] Actions are normally dispatched from container components such as router pages. By having explicit actions for each page, it's also easier to track where an event came from. The video Good Action Hygiene by Mike Ryan [this video] is then linked. How does this apply within NGXS in terms of maintainability and organization? Is there a way to manage these actions more easily in the event that they change or even as the application grows? For a contrived example, suppose I have an action that sets a customer value in a customer state. This action may take place from the login process of the user (where in this environment th

Cites E. Efimov · 2017-06 · Stack Overflow · on “How to wait for 2 Actions in @ngrx/effects”

Can effect wait two actions like Promise.all? Example: @Effect() pulic addUser() { return this.actions$.ofType(user.ADD) .switchMap(() => { return this.userService.add(); }) .map(() => { return new user.AddSuccessAction(); }); } @Effect() pulic addUserOptions() { return this.actions$.ofType(userOptions.ADD) .switchMap(() => { return this.userOptionsService.add(); }) .map(() => { return new userOptions.AddSuccessAction(); }); } @Effect() public complete() { return this.actions$.ofType(user.ADD_SUCCESS, userOptions.ADD_SUCCESS) // how to make it works like Promise.all ? .switchMap(() => { return this.statisticService.add(); }) .map(() => { return new account.CompleteAction(); }); } UPDATED Wha