State Management
Managing context, state and hooks

Context API

Context provides a way to pass data through the component tree without having to pass props down manually at every level.
We are using context for login methods - Auth0, JWT, Firebase.

Redux

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
On top of that, it provides a great developer experience.

State

With Redux, our application state is always kept in plain JavaScript objects and arrays which means you may not put other things into the Redux state - no class instances, built-in JS types like Map / Set Promise / Date, functions, or anything else that is not plain JS data
The root Redux state value is almost always a plain JS object, with other data nested inside of it.
Based on this information, we should now be able to describe the kinds of values we need to have inside our Redux state:
1
export const initialState = {
2
isOpen: 'dashboard', //for active default menu
3
navType: config.theme,
4
locale: config.i18n,
5
rtlLayout: false, // rtlLayout: config.rtlLayout,
6
opened: true
7
};
Copied!

Designing Actions

Actions are plain JavaScript objects that have a type field. As mentioned earlier, you can think of an action as an event that describes something that happened in the application.
In the same way that we designed the state structure based on the app's requirements, we should also be able to come up with a list of some of the actions that describe what's happening:
    Add a new todo entry based on the text the user entered
    Toggle the completed status of a todo
    Select a color category for a todo
    Delete a todo
    Mark all todos as completed
    Clear all completed todos
    Choose a different "completed" filter value
    Add a new color filter
    Remove a color filter
Based on that list of things that can happen, we can create a list of actions that our application will use:
1
export const LOGIN = 'LOGIN';
2
export const LOGOUT = 'LOGOUT';
3
export const MENU_OPEN = '@customization/MENU_OPEN';
4
export const MENU_TYPE = '@customization/MENU_TYPE';
5
export const THEME_LOCALE = '@customization/THEME_LOCALE';
6
export const THEME_RTL = '@customization/THEME_RTL';
7
export const SNACKBAR_OPEN = '@snackbar/SNACKBAR_OPEN';
8
export const ACCOUNT_INITIALISE = 'ACCOUNT_INITIALISE';
9
export const FIREBASE_STATE_CHANGED = 'FIREBASE_STATE_CHANGED';
10
export const SET_MENU = 'SET_MENU';
Copied!

Writing Reducers

Reducers are functions that take the current state and an action as arguments ****and return a new state result.
1
(state, action) => newState
Copied!
Creating the Root Reducer - A Redux app really only has one reducer function: the "root reducer" function
JavaScript
Typescript
1
// project imports
2
import config from 'config';
3
4
// action - state management
5
import * as actionTypes from './actions';
6
7
export const initialState = {
8
isOpen: [], // for active default menu
9
fontFamily: config.fontFamily,
10
borderRadius: config.borderRadius,
11
outlinedFilled: config.outlinedFilled,
12
navType: config.theme,
13
presetColor: config.presetColor,
14
locale: config.i18n,
15
rtlLayout: config.rtlLayout,
16
opened: true
17
};
18
19
// ===========================|| CUSTOMIZATION REDUCER ||===================== //
20
21
const customizationReducer = (state = initialState, action) => {
22
let id;
23
switch (action.type) {
24
case actionTypes.MENU_OPEN:
25
id = action.id;
26
return {
27
...state,
28
isOpen: [id]
29
};
30
31
case actionTypes.MENU_TYPE:
32
return {
33
...state,
34
navType: action.navType
35
};
36
...
37
...
38
...
39
default:
40
return state;
41
}
42
};
43
44
export default customizationReducer;
Copied!
1
// project imports
2
import config from 'config';
3
4
// action - state management
5
import * as actionTypes from './actions';
6
import { CustomizationStateProps, DefaultRootStateProps } from 'types';
7
8
export const initialState: DefaultRootStateProps['customization'] = {
9
isOpen: [], // for active default menu
10
fontFamily: config.fontFamily,
11
borderRadius: config.borderRadius,
12
outlinedFilled: config.outlinedFilled,
13
navType: config.theme,
14
presetColor: config.presetColor,
15
locale: config.i18n,
16
rtlLayout: config.rtlLayout,
17
opened: true
18
};
19
20
// =========================|| CUSTOMIZATION REDUCER ||====================== //
21
22
const customizationReducer = (state = initialState, action: CustomizationStateProps) => {
23
let id;
24
switch (action.type) {
25
case actionTypes.MENU_OPEN:
26
id = action.id;
27
return {
28
...state,
29
isOpen: [id]
30
};
31
32
case actionTypes.MENU_TYPE:
33
return {
34
...state,
35
navType: action.navType
36
};
37
...
38
...
39
default:
40
return state;
41
}
42
};
43
44
export default customizationReducer;
Copied!
Last modified 13d ago