# Client State

## 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](https://redux.js.org/)
* [React Redux](https://react-redux.js.org/)
* [Redux Toolkit](https://redux-toolkit.js.org/)
* [Redux Thunk](https://github.com/reduxjs/redux-thunk)
* [Redux Persist](https://www.npmjs.com/package/redux-persist)
* [Redux Devtools](https://github.com/reduxjs/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.

{% code title="i18n/index.ts" %}

```typescript
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;
```

{% endcode %}

### 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`

{% code title="layout/dashboardSlice.ts" %}

```typescript
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;
```

{% endcode %}

{% code title="layout/index.ts" %}

```typescript
// 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;
```

{% endcode %}

### Module

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

{% code title="module/userSlice.ts" %}

```typescript
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;
```

{% endcode %}

{% code title="module/index.ts" %}

```typescript
// 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;
```

{% endcode %}

### UI

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

{% code title="ui/alertSlice.ts" %}

```typescript
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;
```

{% endcode %}

{% code title="ui/index.ts" %}

```typescript
// 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;
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tokenomy.gitbook.io/boilerplate-code/features/state-management/client-state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.