st.use.(state) and st.do.(action) functions.| state | Description |
|---|---|
| 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) |
A state that stores a single Full Model retrieved from the model.
Loading status of the model state (default: true)
A state that stores multiple Light Models of the model in a Map structure (default: new Map())
Loading status of the modelMap state (default: true)
A state that stores the data modification form of the model (default: DefaultOf(Model))
Loading status of the modelForm state (default: true)
Data information of the modelMap (total count, etc.) (default: 0)
Current modelMap page (default: 1)
Current modelMap page limit (default: 20)
Query arguments for modelMap (default: {})
Last page of the modelMap (default: 1)
Current modelMap sort (default: latest)
Model Actions have the same structure as Slice Action, please refer to the Slice Action section below.
Slice State has the same structure as Model State, please refer to the Model State section above.
| action | Description |
|---|---|
| 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 |
Used when loading data initially, setting initial query, sort, limit, etc.
Used when refreshing data
Used when creating data, using the state of modelForm to create data
Used when updating data, using the state of modelForm to update data
Used when deleting data
Used when viewing a single Full Model
Used when editing a single Full Model
Used when changing the query arguments for data retrieval
Used when modifying the number of data
Used when modifying the sort of data
Used when moving to a different page of data
1import { create } from 'zustand';
2import { DroneModel, DroneInsight, droneSort } from './drone.constant';
3import { api } from '@core/api';
4
5// State 타입 정의
6type DroneState = {
7 // Model State
8 drone: DroneModel | null;
9 droneLoading: boolean;
10 droneMap: Map<string, DroneModel>;
11 droneMapLoading: boolean;
12 droneForm: DroneModel;
13 droneFormLoading: boolean;
14 droneInsight: DroneInsight;
15 pageOfDrone: number;
16 limitOfDrone: number;
17 queryArgsOfDrone: Record<string, any>;
18 lastPageOfDrone: number;
19 sortOfDrone: keyof typeof droneSort;
20};
21
22// Actions 타입 정의
23type DroneActions = {
24 // Model Actions
25 initDrone: (init?: { query?: Record<string, any>; sort?: keyof typeof droneSort; limit?: number }) => Promise<void>;
26 refreshDrone: () => Promise<void>;
27 createDrone: () => Promise<DroneModel>;
28 updateDrone: (id: string) => Promise<DroneModel>;
29 removeDrone: (id: string) => Promise<void>;
30 viewDrone: (id: string) => Promise<DroneModel>;
31 editDrone: (id: string) => Promise<DroneModel>;
32 setQueryArgsOfDrone: (query: Record<string, any>) => void;
33 setLimitOfDrone: (limit: number) => void;
34 setSortOfDrone: (sort: keyof typeof droneSort) => void;
35 setPageOfDrone: (page: number) => void;
36};
37
38// Store 생성
39export const useDroneStore = create<DroneState & DroneActions>((set, get) => ({
40 // Model State 초기값
41 drone: null,
42 droneLoading: true,
43 droneMap: new Map(),
44 droneMapLoading: true,
45 droneForm: DefaultOf(DroneModel),
46 droneFormLoading: true,
47 droneInsight: { count: 0 },
48 pageOfDrone: 1,
49 limitOfDrone: 20,
50 queryArgsOfDrone: {},
51 lastPageOfDrone: 1,
52 sortOfDrone: 'latest',
53
54 // Model Actions 구현
55 initDrone: async (init) => {
56 // Implementation
57 set({ droneMapLoading: true });
58 // ... API 호출 및 상태 업데이트 로직
59 set({ droneMapLoading: false });
60 },
61
62 refreshDrone: async () => {
63 // Implementation
64 const { pageOfDrone, limitOfDrone, queryArgsOfDrone, sortOfDrone } = get();
65 // ... API 호출 및 데이터 새로고침 로직
66 },
67
68 // ... 기타 액션 구현
69}));1// 상태 사용하기
2const drones = st.use.droneMap();
3const isLoading = st.use.droneMapLoading();
4
5// 액션 실행하기
6await st.do.initDrone({ limit: 50, sort: 'latest' });
7await st.do.viewDrone('drone-123');
8 await st.do.setPageOfDrone(2);