Defining your Main Application State

When building an application using Redux, the first thing to think about is, "What state do I want to store?" It is generally a good idea to capture all of the application's state so that it can be accessible from anywhere and all in one place for easy inspection.
In the application state, we store things like:
Data received through API calls
User input
Presentation state, such as menu and button toggles
Application preferences
Internationalization messages
Themes and other customizable areas of your application
To define your application state, use an interface called AppState or IAppState, depending on the naming conventions used on your project.
Here's an example:
app/models/appState.ts
export interface AppState {
  readonly colors: Colors;
  readonly localization: Localization;
  readonly login: Login;
  readonly projectList: ProjectList;
  readonly registration: Registration;
  readonly showMainNavigation: boolean;
}
Note: We're using readonly to ensure compile-time immutability, and it provides the simplest immutable implementation without adding more dependencies to clutter the examples. However, feel free to use another approach on your project that makes sense for your team.

Adding @ngrx to your Project

Example Application

Last modified 3yr ago

Copy link