How update a state in reducer from router parameters

Question

On my website, my user can connect to two different types of accounts.

This is the authentification scenario. Connection A: User click on connection A link --> a form appears --> the state for the user update type property with 'roleA'.

Connection B: User click on connection B link --> a form appears --> the state for the user update type property with 'roleB'.

I can get the Role with this method

this.route.params.subscribe((params: Params) => {
    this.store.dispatch(new fromAuth.Enter({...this.user, type: params['role']}))
})

but this method is called directly in the component.

My question is how can i update my state (user.type) directly in the reducer with the param role from url ?

Actually, i have for user state:

this model:

export interface User {
    token: string,
    type: string,
}

this actions:

import { Action } from "@ngrx/store";
import { User} from "./auth.models";

export enum Types {
    ENTER = '[Auth] Sign in advertiser: Enter',
}

// Enter
export class Enter implements Action {
    readonly type = Types.ENTER;
    constructor(public user: User){}
}

export type All = Enter;

this reducer:

import { User } from './auth.models';
import * as fromActions from './auth.actions'

export interface AuthState {
    user: User;
    loading: boolean;
    error: string;
}

const initialState: AuthState = {
    user: null,
    loading: null,
    error: null,
}

export function reducer(state: AuthState = initialState, action:fromActions.All): AuthState {
    switch(action.type) {

        //Enter
        case fromActions.Types.ENTER: {
            return {...state, loading: false}
        }

        default: {
            return state
        }
    }
}

Thanks for your help

Deitsch Deitsch · Accepted Answer · 2022-05-17T15:50:07

My question is how can i update my state (user.type) directly in the reducer with the param role from url?

Yes, you can. You can hook up your store with the angular router with ngrx/router-store. This way you are independent of the component and only rely on the routing.

Once set up you may listen to router actions on route changes. In the example below the ROTER_NAVIGATION action is used in an effect. You may use this also in reducer and also other router actions (see the corresponding documentation).

routerEffect$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(ROUTER_NAVIGATION),
      ...

How update a state in reducer from router parameters

1 Answers