Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

138
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda