Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

140
Views
Filter feature, price range to fit the prices of the products

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!