• 목차

스토어에서 속성 또는 액션을 사용할 때 셀렉터 함수를 사용하는 것이 좋습니다.

const bears = useBearStore((state) => state.bears);

하지만 반복적으로 셀렉터 함수를 사용하는 것이 불편할 수 있습니다.

이런 경우 셀렉터 함수를 자동 생성하도록 설정할 수 있습니다.

createSelectors 함수

셀렉터 함수를 생성하는 createSelectors 함수를 작성합니다.

const createSelectors = (_store) => {
	let store = _store;
	store.use = {};

	for (let k of Object.keys(store.getState()) {
		store.use[k] = () => store((state) => state[k]);
	}

	return store;
}

다음과 같이 스토어가 작성된 경우

import { create } from 'zustand';

const useBearStoreBase = create((set) => ({
	bears: 0,
	increase: (by) => set((state) => ({ bears: state.bears + by })),
	increment: () => set((state) => ({ bears: state.bears + 1 })),
}));

스토어를 셀렉터 자동 생성 함수에 전달하여 실행합니다.

export const useBearStore = createSelectors(useBearStoreBase);