Filtering and already filtered state

JavaScript
1

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:

1171×248 19.6 KB

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???

2

I think a better way to approach this would be to store the value of both filters in your central state. The actions dispatched by the filter dropdown components would only change the value of those. The account list component would receive the data and filter values, and do the filtering of the data set - this way no matter which action is dispatched you can ensure the data is filtered by both properties.

Check out this SO answer for more info.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.