ReactのuseReducerに渡すreducerを手軽に書く
reducer (React)を手軽に書く。
code:tsx
interface ISearchQuery {
readonly text: string;
readonly conditions: readonly {
readonly categoryId: string;
readonly keyId: string;
readonly keyShortName: string;
}[];
}
const searchQueryReducers = {
setText: (
prevState: ISearchQuery,
action: { readonly name: 'setText'; readonly value: ISearchQuery'text' },
): ISearchQuery => ({ ...prevState, text: action.value }),
setConditions: (
prevState: ISearchQuery,
action: { readonly name: 'setConditions'; readonly value: ISearchQuery'conditions' },
): ISearchQuery => ({ ...prevState, conditions: action.value }),
};
const searchQueryReducer = <
A extends Parameters<(typeof searchQueryReducers)keyof typeof searchQueryReducers>'1',
(
prevState: ISearchQuery,
action: A,
): ISearchQuery =>
(searchQueryReducersaction.name as (prevState: ISearchQuery, action: A) => ISearchQuery)(
prevState,
action,
);
searchQueryReducersが信頼できる唯一の情報源になっている。