model.store.ts

The state management system is defined as a single global store based on zustand. It provides state usage and state update functions, using the st.use.(state) and st.do.(action) functions.
Each model has a model.store.ts file, and automatically generates states and actions based on the constant.ts schema of the model, which are commonly used.

1. Model State & Actions

1.1. Model State
Objects that store basic state information of the model. Each state has a specific purpose and a default value.
model

A state that stores a single Full Model retrieved from the model.

modelLoading

Loading status of the model state (default: true)

modelMap

A state that stores multiple Light Models of the model in a Map structure (default: new Map())

modelMapLoading

Loading status of the modelMap state (default: true)

modelForm

A state that stores the data modification form of the model (default: DefaultOf(Model))

modelFormLoading

Loading status of the modelForm state (default: true)

modelInsight

Data information of the modelMap (total count, etc.) (default: 0)

pageOfModel

Current modelMap page (default: 1)

limitOfModel

Current modelMap page limit (default: 20)

queryArgsOfModel

Query arguments for modelMap (default: {})

lastPageOfModel

Last page of the modelMap (default: 1)

sortOfModel

Current modelMap sort (default: latest)

1.2. Model Actions
Model Actions are actions that manage the data of the model. These actions are provided by the state management system and are used for CRUD and query settings of the data.

Model Actions have the same structure as Slice Action, please refer to the Slice Action section below.

2. Slice State & Action

2.1. Slice State
Slice State has the same structure as Model State, please refer to the Model State section above.

Slice State has the same structure as Model State, please refer to the Model State section above.

2.2. Slice Action
Slice Action provides actions for specific parts of the model (slice). Each action has a specific purpose and is used for state management.
initModel

Used when loading data initially, setting initial query, sort, limit, etc.

refreshModel

Used when refreshing data

createModel

Used when creating data, using the state of modelForm to create data

updateModel

Used when updating data, using the state of modelForm to update data

removeModel

Used when deleting data

viewModel

Used when viewing a single Full Model

editModel

Used when editing a single Full Model

setQueryArgsOfModel

Used when changing the query arguments for data retrieval

setLimitOfModel

Used when modifying the number of data

setSortOfModel

Used when modifying the sort of data

setPageOfModel

Used when moving to a different page of data

3. Full Example

Full example of the model.store.ts file.
import { create } from 'zustand';
import { DroneModel, DroneInsight, droneSort } from './drone.constant';
import { api } from '@core/api';
// State 타입 정의
type DroneState = {
  // Model State
  drone: DroneModel | null;
  droneLoading: boolean;
  droneMap: Map<string, DroneModel>;
  droneMapLoading: boolean;
  droneForm: DroneModel;
  droneFormLoading: boolean;
  droneInsight: DroneInsight;
  pageOfDrone: number;
  limitOfDrone: number;
  queryArgsOfDrone: Record<string, any>;
  lastPageOfDrone: number;
  sortOfDrone: keyof typeof droneSort;
};
// Actions 타입 정의
type DroneActions = {
  // Model Actions
  initDrone: (init?: { query?: Record<string, any>; sort?: keyof typeof droneSort; limit?: number }) => Promise<void>;
  refreshDrone: () => Promise<void>;
  createDrone: () => Promise<DroneModel>;
  updateDrone: (id: string) => Promise<DroneModel>;
  removeDrone: (id: string) => Promise<void>;
  viewDrone: (id: string) => Promise<DroneModel>;
  editDrone: (id: string) => Promise<DroneModel>;
  setQueryArgsOfDrone: (query: Record<string, any>) => void;
  setLimitOfDrone: (limit: number) => void;
  setSortOfDrone: (sort: keyof typeof droneSort) => void;
  setPageOfDrone: (page: number) => void;
};
// Store 생성
export const useDroneStore = create<DroneState & DroneActions>((set, get) => ({
  // Model State 초기값
  drone: null,
  droneLoading: true,
  droneMap: new Map(),
  droneMapLoading: true,
  droneForm: DefaultOf(DroneModel),
  droneFormLoading: true,
  droneInsight: { count: 0 },
  pageOfDrone: 1,
  limitOfDrone: 20,
  queryArgsOfDrone: {},
  lastPageOfDrone: 1,
  sortOfDrone: 'latest',
  // Model Actions 구현
  initDrone: async (init) => {
    // Implementation
    set({ droneMapLoading: true });
    // ... API 호출 및 상태 업데이트 로직
    set({ droneMapLoading: false });
  },
  
  refreshDrone: async () => {
    // Implementation
    const { pageOfDrone, limitOfDrone, queryArgsOfDrone, sortOfDrone } = get();
    // ... API 호출 및 데이터 새로고침 로직
  },
  
  // ... 기타 액션 구현
}));

Usage Example

// 상태 사용하기
const drones = st.use.droneMap();
const isLoading = st.use.droneMapLoading();
// 액션 실행하기
await st.do.initDrone({ limit: 50, sort: 'latest' });
await st.do.viewDrone('drone-123');
              await st.do.setPageOfDrone(2);
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2025 Akan.js. All rights reserved.
System managed bybassman