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
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 호출 및 데이터 새로고침 로직
},
// ... 기타 액션 구현
}));
// 상태 사용하기
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);