# Zustand
Este guia descreve como usamos Zustand para estado compartilhado.
app/store/.create com persist de zustand/middleware.Exemplo real: app/store/contracts-summary-store.tsx.
export type SummaryFilterState = {
name: string;
dateField: "base_competence" | "payment_period";
startDate: Dayjs;
endDate: Dayjs;
};
type SummaryFilterAction = {
setName: (name: string) => void;
setDateField: (value: SummaryFilterState["dateField"]) => void;
setStartDate: (value: Dayjs) => void;
setEndDate: (value: Dayjs) => void;
getFormattedFilters: (retailChainIds?: number[]) => string[];
};
create e, se fizer sentido, persist:const useContractsSummaryStore = create<
SummaryFilterState & SummaryFilterAction
>()(
persist(
(set, get) => ({
name: "",
setName: (name) => set(() => ({ name })),
// ...demais fields
}),
{ name: "contractsSummaryFiltersStore" },
),
);
StateStorage customizado.Veja a implementação em app/store/contracts-summary-store.tsx:
getStateFromSearchParams lê name, dateField, startDate, endDate.setItem atualiza a URL usando window.history.replaceState.useShallow para evitar re-renders desnecessarios.Exemplo real em app/routes/home.tsx:
const { name, getFormattedFilters } = useContractsSummaryStore(
useShallow((state) => ({
name: state.name,
getFormattedFilters: state.getFormattedFilters,
})),
);