Client State

State is typically managed on the client side.

Overview

Client state management refers specifically to the process of managing the state or data of a client-side application, such as a web or mobile application, in a way that allows it to be easily accessed, modified, and shared across different components of the application running on the client's device.

In this boilerplate we recommended for learn about this library.

• Redux

• React Redux

• Redux Toolkit

• Redux Thunk

• Redux Persist

• Redux Devtools

There is a tree structure to handle state management across all running applications.

store
├── i18n
│   ├── <another reducer>
│   └── index.ts //Combine reducers
├── layout
│   ├── <another reducer>
│   ├── dashboardSlice.ts //Dashboard layout reducer
│   └── index.ts //Combine reducers
├── module
│   ├── <another reducer>
│   ├── userSlice.ts //User module reducer
│   └── index.ts //Combine reducers
└── ui
    ├── <another reducer>
    ├── alertSlice.ts //UI alert reducer
    └── index.ts //Combine reducers

i18n

State i18n is used to handle all multilanguage state requirements. This is usually used for language switching in applications.

i18n/index.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface I18nState {
  locales: string[];
  defaultLocale: string;
}

const initialState: I18nState = {
  locales: ["id-ID", "en-EN"],
  defaultLocale: "id-ID",
};

const i18nSlice = createSlice({
  name: "i18n",
  initialState,
  reducers: {
    changeDefaultLocal: (state, action: PayloadAction<string>) => {
      state.defaultLocale = action.payload;
    },
  },
});

export const { changeDefaultLocal } = i18nSlice.actions;

export default i18nSlice.reducer;

Layout

State layout is used to handle all state ui requirements related to system layout. Inside the boilerplate there are 3 main layouts, namely dashboard, landing, mobile. Sample code is in src/store/layout

layout/dashboardSlice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface DashboardState {
  sidebarOpen: boolean;
}

const initialState: DashboardState = { sidebarOpen: false };

const dashboardSlice = createSlice({
  name: "dashboard",
  initialState,
  reducers: {
    sidebarOpen: (state, action: PayloadAction<boolean>) => {
      state.sidebarOpen = action.payload;
    },
  },
});

export const { sidebarOpen } = dashboardSlice.actions;

export default dashboardSlice.reducer;

layout/index.ts

// Vendors
import { combineReducers } from "@reduxjs/toolkit";

// Reducers
import dashboardReducer from "@/store/layout/dashboardSlice";

const layoutReducer = combineReducers({ dashboard: dashboardReducer });
export type LayoutState = ReturnType<typeof layoutReducer>;
export default layoutReducer;

Module

State modules are used to handle all the state module requirements of the application, for example the auth module, account, product etc.

module/userSlice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface UserState {
  name: string;
}

const initialState: UserState = { name: "" };

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    changeName: (state, action: PayloadAction<string>) => {
      state.name = action.payload;
    },
  },
});

export const { changeName } = userSlice.actions;

export default userSlice.reducer;

module/index.ts

// Vendors
import { combineReducers } from "@reduxjs/toolkit";

// Reducers
import userReducer from "@/store/module/userSlice";

const moduleReducer = combineReducers({ user: userReducer });
export type ModuleState = ReturnType<typeof moduleReducer>;
export default moduleReducer;

UI

State ui is used to handle all state ui requirements related to the system user interface for example alerts, drawers etc.

ui/alertSlice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface AlertState {
  message: string;
}

const initialState: AlertState = { message: "" };

const alertSlice = createSlice({
  name: "alert",
  initialState,
  reducers: {
    addAlert: (state, action: PayloadAction<string>) => {
      state.message = action.payload;
    },
    removeAlert: (state) => {
      return {
        ...state,
        initialState,
      };
    },
  },
});

export const { addAlert, removeAlert } = alertSlice.actions;

export default alertSlice.reducer;

ui/index.ts

// Vendors
import { combineReducers } from "@reduxjs/toolkit";

// Reducers
import alertReducer from "@/store/ui/alertSlice";

const uiReducer = combineReducers({ alert: alertReducer });
export type UiState = ReturnType<typeof uiReducer>;
export default uiReducer;