ngrx: centralized state management with example

Here is an example of how centralized state management can be implemented using ngrx in an Angular application.

First, we define the state interface that represents the overall state of our application:

export interface AppState {
  user: UserState;
  products: ProductState;
}

In this example, we have two feature states: user and products.

Next, we define the feature states. For example, here is the UserState interface:

export interface UserState {
  users: User[];
  selectedUser: User;
  loading: boolean;
  error: string;
}

This defines the shape of the user state, including an array of users, a selected user, a loading flag, and an error message.

We then define actions for each feature state. For example, here is an action for adding a user:

export class AddUser implements Action {
  readonly type = UserActionTypes.AddUser;
  constructor(public payload: User) {}
}

This action has a type and a payload, which is the user being added.

Next, we define reducers for each feature state. Here is an example of a reducer for the UserState:

export function userReducer(
  state = initialState,
  action: UserActions
): UserState {
  switch (action.type) {
    case UserActionTypes.AddUser:
      return {
        ...state,
        users: [...state.users, action.payload]
      };
    case UserActionTypes.SelectUser:
      return {
        ...state,
        selectedUser: action.payload
      };
    case UserActionTypes.LoadUsers:
      return {
        ...state,
        loading: true
      };
    case UserActionTypes.LoadUsersSuccess:
      return {
        ...state,
        users: action.payload,
        loading: false
      };
    case UserActionTypes.LoadUsersFailure:
      return {
        ...state,
        error: action.payload,
        loading: false
      };
    default:
      return state;
  }
}

This reducer handles the AddUser, SelectUser, LoadUsers, LoadUsersSuccess, and LoadUsersFailure actions. Each action modifies the state of the user feature state in a specific way.

We then combine the reducers for each feature state into a single root reducer:

export const reducers: ActionReducerMap<AppState> = {
  user: userReducer,
  products: productReducer
};

Finally, we create a store using the root reducer:

@NgModule({
  imports: [
    StoreModule.forRoot(reducers)
  ]
})
export class AppModule {}

Now we can use the store in our components to manage the state of our application. For example, we can dispatch an action to add a user:

this.store.dispatch(new AddUser(newUser));

We can also select data from the store using selectors:

this.users$ = this.store.select(selectUsers);

By using ngrx to manage the state of our application, we can ensure that the state remains consistent and predictable across all components, even as the application grows in size and complexity

BONUS BELOW

If you are new to the web development and hustling for bread and butter due to low income, Please check out the below link
Live Chat Jobs — You have to try this one at home