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.