model.store.ts

store 파일은 module의 client-side state와 action layer입니다. page와 UI component는 fetch 호출을 직접 조율하지 않고 store에서 state를 읽고 store action을 호출합니다.

store는 UI와 generated fetch/sig client 사이에 위치합니다. business rule은 service와 document에 두고, store는 UI state, form state, list state, toast message, client navigation을 다룹니다.

Store class 구조

store는 store(sig.model, stateFactory)로 정의합니다. 두 번째 인자는 factory이므로 runtime instance마다 default state가 안전하게 다시 만들어집니다.

ticket.store.ts

service-only store

Generated store 확장

app이 generated 또는 library domain을 확장한다면 local state 뒤에 generated stores를 넘깁니다. inherited state, action, metadata가 merge되고 app이 자기 state와 action을 추가합니다.

user.store.ts

Writable와 derived state

대부분의 store는 plain writable state만 필요합니다. state builder는 persist와 session 값도 지원합니다. store()의 세 번째 인자로 URL search param이나 computed value 같은 derived state를 정의할 수 있습니다.

store state builders

plain

store와 함께 reset되어도 되는 UI state에는 일반 값을 사용합니다.

persist

browser reload 이후에도 유지해야 하는 값에 사용합니다.

session

현재 browser session 동안만 유지하면 되는 값에 사용합니다.

search / computed

URL 기반 state 또는 writable state에서 계산되는 값에 사용합니다.

State 상호작용

store action 내부에서는 optional read에 get, 필수 state에 pick, update에 set을 사용합니다. 다음 코드가 해당 state 없이는 동작할 수 없을 때 pick이 유용합니다.

method	설명	예제
get()	store state의 현재 snapshot을 가져옵니다.
set(state)	store state를 업데이트합니다. 얕게 병합됩니다.
pick(...keys)	필수 state 값을 선택합니다. 요청한 key 중 하나라도 null 또는 undefined면 즉시 error를 발생시킵니다.

get()

store state의 현재 snapshot을 가져옵니다.

set(state)

store state를 업데이트합니다. 얕게 병합됩니다.

pick(...keys)

필수 state 값을 선택합니다. 요청한 key 중 하나라도 null 또는 undefined면 즉시 error를 발생시킵니다.

pick은 요청한 값이 null 또는 undefined면 error를 발생시킵니다. null을 직접 처리해야 하는 분기라면 get을 사용하세요.

표준 model API

sig.model에 묶인 store는 generated model state와 generated CRUD/form action을 받습니다. 이 helper들은 create, update, remove, view, edit, submit, cache 흐름을 다룹니다.

Base State

field	설명
st.<model>: Full \| null	The cached full model instance.
st.<model>Loading: string \| boolean	Loading status for the model instance.
st.<model>Form: Default	Form state for create or update flows.
st.<model>FormLoading: string \| boolean	Loading status for form submission.
st.<model>Submit: Submit	Latest submit state.
st.<model>ViewAt: Date	Time when the detailed view was opened.
st.<model>Modal: string \| null	Modal key associated with this model.

st.<model>: Full | null

The cached full model instance.

st.<model>Loading: string | boolean

Loading status for the model instance.

st.<model>Form: Default

Form state for create or update flows.

st.<model>FormLoading: string | boolean

Loading status for form submission.

st.<model>Submit: Submit

Latest submit state.

st.<model>ViewAt: Date

Time when the detailed view was opened.

st.<model>Modal: string | null

Modal key associated with this model.

Base Actions

method	설명
create<Class>InForm(options?)	Create a document using form state.
update<Class>InForm(options?)	Update a document using form state.
create<Class>(data, options?)	Create a new document with data.
update<Class>(id, data, options?)	Update an existing document.
remove<Class>(id, options?)	Remove a document.
check<Class>Submitable(disabled?)	Check whether the form can be submitted.
submit<Class>(options?)	Submit the form for create or update.
new<Class>(partial?, options?)	Initialize form state for creation.
edit<Class>(model, options?)	Initialize form state for editing.
merge<Class>(model, data, options?)	Merge data into an existing cached document.
view<Class>(model, options?)	Open detailed view state.
set<Class>(...models)	Manually set model cache.
reset<Class>(model?)	Reset model state.

create<Class>InForm(options?)

Create a document using form state.

update<Class>InForm(options?)

Update a document using form state.

create<Class>(data, options?)

Create a new document with data.

Slice 자동 생성 기능

slice state와 action은 model.signal.ts에 선언된 slice에서 생성됩니다. list page, pagination, sorting, selection, insight state에 사용합니다.

ticket.signal.ts

Generated Slice State

field	설명
st.default<Class>: Default	Default value for the slice.
st.<slice>List: DataList<Light>	List loaded by init or refresh.
st.<slice>ListLoading: boolean	Loading status of the list.
st.<slice>InitList: DataList<Light>	Initial list snapshot.
st.<slice>InitAt: Date	Time when the list was initialized.
st.<slice>Selection: DataList<Light>	Selected items in the list.
st.<slice>Insight: Insight	Insight data for the list.
st.lastPageOf<Slice>: number	Last accessed page number.
st.pageOf<Slice>: number	Current page number.
st.limitOf<Slice>: number	Items per page.
st.queryArgsOf<Slice>: QueryArgs	Current query arguments.
st.sortOf<Slice>: Sort	Current sort setting.

st.default<Class>: Default

Default value for the slice.

st.<slice>List: DataList<Light>

List loaded by init or refresh.

st.<slice>ListLoading: boolean

Loading status of the list.

st.<slice>InitList: DataList<Light>

Initial list snapshot.

st.<slice>InitAt: Date

Time when the list was initialized.

st.<slice>Selection: DataList<Light>

Selected items in the list.

st.<slice>Insight: Insight

Insight data for the list.

st.lastPageOf<Slice>: number

Last accessed page number.

st.pageOf<Slice>: number

Current page number.

st.limitOf<Slice>: number

Items per page.

st.queryArgsOf<Slice>: QueryArgs

Current query arguments.

st.sortOf<Slice>: Sort

Current sort setting.

Generated Slice Actions

method	설명
init<Slice>(...args)	Initialize list with query args.
refresh<Slice>(initForm?)	Reload list with strict consistency.
select<Slice>(model, options?)	Update selection state.
setPageOf<Slice>(page, options?)	Change page and reload.
addPageOf<Slice>(page, options?)	Load next page and append.
setLimitOf<Slice>(limit, options?)	Change list limit and reload.
setQueryArgsOf<Slice>(...args)	Change query arguments and reload.
setSortOf<Slice>(sort, options?)	Change sort and reload.

init<Slice>(...args)

Initialize list with query args.

refresh<Slice>(initForm?)

Reload list with strict consistency.

select<Slice>(model, options?)

Update selection state.

setPageOf<Slice>(page, options?)

Change page and reload.

addPageOf<Slice>(page, options?)

Load next page and append.

setLimitOf<Slice>(limit, options?)

Change list limit and reload.

사용 패턴

store action 내부에서는 this.get, this.pick, this.set, generated fetch client, generated setter를 사용합니다. React component에서는 st.use로 읽고 st.do로 action을 호출합니다.

Inside store

Inside component

자동 생성 setter

setter examples

RootStore로 다른 store 접근

store instance는 app-level RootStore type으로 merge됩니다. cross-store coordination이 꼭 필요할 때만 RootStore casting을 사용하세요. 너무 넓은 cross-store coupling은 action 이해를 어렵게 만듭니다.

user.store.ts

실전 규칙

fetch call, loading state, toast message, modal state, navigation 같은 UI orchestration은 store에 둡니다.

순수 business rule은 store action이 아니라 constant, document, service, signal에 둡니다.

필수 state에는 pick을, null이 가능한 분기에는 get을 사용합니다.

store action 내부에서는 generated fetch client를 사용하고 mutation 성공 후 this.setTicket 같은 generated setter를 사용합니다.

app 전용 state와 action을 추가하기 전에 ...model.stores로 generated 또는 library store를 확장합니다.

cross-store coordination에는 RootStore casting을 필요한 만큼만 사용합니다.

model.store.ts

Store class 구조

Generated store 확장

Writable와 derived state

RootStore로 다른 store 접근

실전 규칙

model.signal.ts

Model.Template.tsx

method

설명

예제

get()

store state의 현재 snapshot을 가져옵니다.

set(state)

store state를 업데이트합니다. 얕게 병합됩니다.

pick(...keys)

필수 state 값을 선택합니다. 요청한 key 중 하나라도 null 또는 undefined면 즉시 error를 발생시킵니다.

field

설명

st.<model>: Full | null

The cached full model instance.

st.<model>Loading: string | boolean

Loading status for the model instance.

st.<model>Form: Default

Form state for create or update flows.

st.<model>FormLoading: string | boolean

Loading status for form submission.

st.<model>Submit: Submit

Latest submit state.

st.<model>ViewAt: Date

Time when the detailed view was opened.

st.<model>Modal: string | null

Modal key associated with this model.

method

설명

create<Class>InForm(options?)

Create a document using form state.

update<Class>InForm(options?)

Update a document using form state.

create<Class>(data, options?)

Create a new document with data.

update<Class>(id, data, options?)

Update an existing document.

remove<Class>(id, options?)

Remove a document.

check<Class>Submitable(disabled?)

Check whether the form can be submitted.

submit<Class>(options?)

Submit the form for create or update.

new<Class>(partial?, options?)

Initialize form state for creation.

edit<Class>(model, options?)

Initialize form state for editing.

merge<Class>(model, data, options?)

Merge data into an existing cached document.

view<Class>(model, options?)

Open detailed view state.

set<Class>(...models)

Manually set model cache.

reset<Class>(model?)

Reset model state.

field

설명

st.default<Class>: Default

Default value for the slice.

st.<slice>List: DataList<Light>

List loaded by init or refresh.

st.<slice>ListLoading: boolean

Loading status of the list.

st.<slice>InitList: DataList<Light>

Initial list snapshot.

st.<slice>InitAt: Date

Time when the list was initialized.

st.<slice>Selection: DataList<Light>

Selected items in the list.

st.<slice>Insight: Insight

Insight data for the list.

st.lastPageOf<Slice>: number

Last accessed page number.

st.pageOf<Slice>: number

Current page number.

st.limitOf<Slice>: number

Items per page.

st.queryArgsOf<Slice>: QueryArgs

Current query arguments.

st.sortOf<Slice>: Sort

Current sort setting.

method

설명

init<Slice>(...args)

Initialize list with query args.

refresh<Slice>(initForm?)

Reload list with strict consistency.

select<Slice>(model, options?)

Update selection state.

setPageOf<Slice>(page, options?)

Change page and reload.

addPageOf<Slice>(page, options?)

Load next page and append.

setLimitOf<Slice>(limit, options?)

Change list limit and reload.

setQueryArgsOf<Slice>(...args)

Change query arguments and reload.

setSortOf<Slice>(sort, options?)

Change sort and reload.