CODEWITHSUNDEEP
reactjsfilterreduxpaginationreact-redux
AmitJS94
AmitJS94

Reputation: 1212

Redux pagination with filter and sort

I am learning redux and I want to implement pagination with sort and filter properties.

This is the api url http://localhost:3001/cars?manufacturer=Fiat&color=white&sort=asc&page=1

There is also list of manufacturer http://localhost:3001/manufacturers

Since initially all the dropdowns will have default value and page will be 1 There will be multiple reducers to fetch manufacturers, colors and cars. 

  //fetchManufacturerReducer
    const initialState = {
        manufacturers:[]
    };

  //fetchCarsListReducer
    const initialState = {
      manufacturers:"Fiat",
      color:"Black",
      data:{
        cars:[],
        currentPage:1,
        totalPage:10
      }
   };

Questions:

  1. Is this right approach ?

  2. How can i control the order of requests - first get list of manufactures,colors, then carsList with default values and page 1

  3. When the user changes color to Black how can i change color activeColor to dispatch new fetchCarsList?

  4. At some stage i would have to share the state between reducers which seems hard to do - Would it better to put everything in single Reducer ?

Upvotes: 0

Views: 1901

Answers (2)

Tatsu
Tatsu

Reputation: 1901

  1. If your app reuses the data of manufactures and colors in other places. It makes sense to put these two data in the global store (redux). Otherwise, don't store it in the local state of your component.

  2. Use Promise

    Promise.all(getManufactures(), getColors()).then([manufactures, colors] => { getCars(manufactures, colors)) }

  3. Separate the logic of calling API (getCars), use eventHandler to call that logic onColorChange, onManufactureChange

  4. Use local state to handle data while filtering as you may not use this data in any other places.

Upvotes: 2

Igor B
Igor B

Reputation: 894

Redux is all about storing/chaning your data(state) and accessing it easy - if it doesn't feel easy - you need to change composition of reducers, however if you just starting with redux anything goes)

TLDR:

Let me try to answer in reverse order

  1. Would it better to put everything in single Reducer ?

I had experience working with teammate that just started to work with redux and came up with idea keep all filtering/sorting logic in a huge(over 700 loc) reducer. Time and features came and go and later it become clear that that in huge reducer have huge disadvantage of managing huge amount of props every time new action arrives in which is turned out to be a very bug prone when it started to grow up.

Also having huge reducer have disadvantage of being hard to understand by other people in team.

  1. When the user changes color to Black how can i change color activeColor to dispatch new fetchCarsList?

You cant dispatch data changes between reducers. But you can achieve what you want by dispatching an proper action to multiple reducers

  1. How can i control the order of requests - first get list of manufactures,colors, then carsList with default values and page

Redux is about keeping the data - reducers is about mutation data with help of actions, not about business logic based on data or fetching the data)

  1. Is this right approach ?

The one of good approaches is to get a solution that would not make you ask question (3) (4) because these question together are sign that composition of reducers(and data!) isn't right.

I cant suggest you more because composition is very much depends on how data get accessed, but you can start with what you have and change thing later once you see repeated patterns of how you accessing/changing the data.

Upvotes: 3

Related Questions