I have a filter icon, that after being pressed opens a filter modal with options. One of the options is a price range, I have a min and a max value on that price range, and I want the min value to be dynamic and search for the most inexpensive product and use that as a min value and the same for max value. Right now I've hardcoded 0 and 10000 for min and max. I have a filter central state which I am managing using redux-toolkit.
Filter slice:
import { createSlice } from "@reduxjs/toolkit";
const laptopsMin = 0;
const laptopsMax = 10000;
export const filtersInitialState = {
laptopsFilters: {
priceRange: {
minValue: laptopsMin,
maxValue: laptopsMax,
fromValue: laptopsMin,
toValue: laptopsMax,
},
brands: {
HP: true,
DELL: true,
Razer: true,
MSI: true,
Alienware: true,
Lenovo: true,
},
screenSizes: {
"17.6''": true,
14: true,
27: true,
"13.3''": true,
"15.6''": true,
},
},
};
export const filterSlice = createSlice({
name: "filter",
initialState: {
filters: filtersInitialState,
},
reducers: {
filtersChange: (state, { payload }) => {
state.filters[payload[0]][payload[1]][payload[2]] = payload[3];
},
clearFilters: (state) => {
state.filters = filtersInitialState;
},
},
});
export const { filtersChange, clearFilters } = filterSlice.actions;
export default filterSlice.reducer;
I am using minValue, and maxValue in my price range component, so my thought was as soon as they change in the central store, the component will change as well. So my initial plan was to fetch the products from my database (Firebase: cloud firestore) and order them by price, then use the first index and the last index as min and max price. But it doesn't seem to work, and the min price just stays 0. Also, it seems a bit redundant to fetch all the products all over again for the prices.
Then I thought, I am already fetching the products to render them out on the product page, so why not use the products state I have and just sort it in the front-end? Well, my issue was, that I can't use the store in a different store, so I can't use the product state in the filter state. Any suggestions on the way I should approach it?