CODEWITHSUNDEEP
reactjsfilteractionstate
RamAlx
RamAlx

Reputation: 7334

Filtering and already filtered state

I find it difficult to cope with a task for today since i'm new to react-redux. Let me explain. I have two drop downs list and a grid just like the screenshot below: enter image description here

The purpose of the drop downs is to filter my dummy data the first one by side and the second one by status. I created two actions:

export function filterBySide(product_side) {
    const filtered_data_by_side = data.filter(record =>
      {
          return record.side.match(product_side)
      });

    return {
      type: FILTER_BY_SIDE,
      payload: {
        filtered_data_by_side
      }
  };
}

export function filterByStatus(product_status) {
    const filtered_data_by_status = data.filter(record =>
      {
          return record.status.match(product_status)
      });

    return {
      type: FILTER_BY_STATUS,
      payload: {
        filtered_data_by_status
      }
  };
}

As you can see the first one is responsible for the side filtering and the other for the status filtering. Then i pass these to actions to my reducer like this:

case FILTER_BY_SIDE:
      return state.set('filtered_data_by_side', List(action.payload.filtered_data_by_side));
    case FILTER_BY_STATUS:
      return state.set('filtered_data_by_status', List(action.payload.filtered_data_by_status));

and then i use MapStateToProps to make them available in the account list:

function mapStateToProps(state) {
  return {
    filtered_data_by_side:state.customer.get('filtered_data_by_side'),
    filtered_data_by_status:state.customer.get('filtered_data_by_status')
  };
}

I also fetch my actions to the drop down lists. My PROBLEM is that when i passed filtered_data_by_side as data in my grid only the first action occurs and when i passed filtered_data_by_status the second which is reasonable of course. The desired functionality is when i choose the first drop down to filter my data and then i choose the second the data that must be filtered by the first and then by the second dropdown and vice versa. How can i do this???

Upvotes: 0

Views: 142

Answers (1)

Max Sindwani
Max Sindwani

Reputation: 1267

One way to do this is to generalize the filter function and persist the filters in the reducer. What you could have is a filterData action that takes in different types of filters represented by an object (i.e { product_side : '...', product_status : '...' })). When a new or existing filter is passed, it can be used to produce new data with all the other filters applied. Afterwards, it can be added or updated in the reducer to maintain the state of the filters.

Consider the following:

// Action
function setFilters(myFilters) {
  return {
    type: SET_FILTERS,
    payload: {
      myFilters
    }
  };
}

// Usage
filterData({ ...oldFilters, status_filter: newStatusFilter });


// Reducer
function myReducer(state, action) {

   switch(action.type) {
    // ...
       FILTER:
         return Object.assign({}, state, {
           filters: action.payload
         });
    // ...
   }

}

When you render your table, you can look at your properties to see which filters have been applied, and then filter the data accordingly before you render.

Upvotes: 1

Related Questions