State Management
Managing context, state and hooks
Context API
We are using context for login methods - Auth0, JWT, Firebase.
import { createContext, ReactNode, useMemo } from 'react';
// project imports
import config from 'config';
import { useLocalStorage } from 'hooks/useLocalStorage';
// types
import { ConfigContextValue, ConfigStates } from 'types/config';
export type Props = {
children: ReactNode;
};
// ==============================|| CONFIG CONTEXT ||============================== //
export const ConfigContext = createContext<ConfigContextValue | undefined>(undefined);
// ==============================|| CONFIG PROVIDER ||============================== //
export function ConfigProvider({ children }: Props) {
const { state, setState, setField, resetState } = useLocalStorage<ConfigStates>('berry-config-vite-ts', config);
const memoizedValue = useMemo(() => ({ state, setState, setField, resetState }), [state, setField, setState, resetState]);
return <ConfigContext.Provider value={memoizedValue}>{children}</ConfigContext.Provider>;
}
State
export const initialState = {
isOpen: 'dashboard', //for active default menu
navType: config.theme,
locale: config.i18n,
rtlLayout: false, // rtlLayout: config.rtlLayout,
opened: true
};
Designing Actions
We designed the state structure based on the app's requirements.
Based on that list of things that can happen, we created a list of actions that our application will use:
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';
export const REGISTER = 'REGISTER';
export const FIREBASE_STATE_CHANGED = 'FIREBASE_STATE_CHANGED';
Writing Reducers
Creating the Root Reducer - A Redux app really only has one reducer function: the "root reducer" function
...
// project imports
import axios from 'utils/axios';
import { dispatch } from '../index';
...
...
// Reducer
export default slice.reducer;
...
export function getContacts() {
return async () => {
try {
const response = await axios.get('/api/contact/list');
dispatch(slice.actions.getContactsSuccess(response.data.contacts));
} catch (error) {
dispatch(slice.actions.hasError(error));
}
};
}
export function modifyContact(contact: UserProfile) {
return async () => {
try {
const response = await axios.post('/api/contact/modify', contact);
dispatch(slice.actions.modifyContactSuccess(response.data));
} catch (error) {
dispatch(slice.actions.hasError(error));
}
};
}
Last updated
Was this helpful?