So, here is a little bit of context: I am very new to Zustand and wanted to try it, so I decided to use it in my car app project. In the project, I have car filtering functionality where I have many filters of different types. The structure is as follows:
export interface CarFilters {
location?: Location[];
carModel?: CarModel[];
priceRange?: FilterRange<number>;
modelYearRange?: FilterRange<number>;
kilometersDriven?: FilterRange<number>;
registeredIn?: Location;
trustedCars?: TrustedCars[];
transmission?: Transmission;
bodyColor?: string[];
fuelType?: FuelType[];
engineCapacity?: FilterRange<number>;
assembly?: Assembly;
bodyType?: BodyType[];
modelCategory?: ModelCategory[];
sellerType?: SellerType;
numberOfDoors?: NumberOfDoors;
seatingCapacity?: SeatingCapacity;
adProperties?: AdProperties[];
searchQuery?: string;
}
so, I was wondering what is the best way to structure your store should I make one filter state and set it when any of the value in it changes or should I make each filter an individual state and have a setter for that? Also, I want two very specific features:
- One is I want to show in the app what filters are currently being
applied for example if there are values in the location array or car
model array I want to show them in active filters - Second is I want to show the count of these active filters someplace
else.
What is the best and performant way to do this and what are the things I need to take care of so that I don’t end up rerendering more than required? A detailed explanation would be a great help.