Фильтрация и уже отфильтрованное состояние

Question

Мне сложно справиться с задачей на сегодняшний день, так как я новичок в реакции-редукции. Позволь мне объяснить. У меня есть два списка падение падения и сетки так же, как на скриншоте ниже:

Целью падения капли, чтобы фильтровать мои фиктивные данные первый бок, а второй по статусу. Я создал два действия:

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 
     } 
    }; 
} 

Как вы можете видеть, что первые один отвечает за фильтрацию на стороне, а другой для фильтрации состояния. Тогда я передать их к действиям, к моему редуктору, как это:

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)); 

, а затем я использую MapStateToProps, чтобы сделать их доступными в списке учетных записей:

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') 
    }; 
} 

Я также выборки мои действия в выпадающем списке , Моя ПРОБЛЕМА заключается в том, что когда я прошел filter_data_by_side как данные в моей сетке, происходит только первое действие, и когда я прошел filter_data_by_status, второй, который разумно, конечно. Желаемая функциональность - это когда я выбираю первый снимок, чтобы фильтровать мои данные, а затем я выбираю второй данные, которые должны быть отфильтрованы первым, а затем вторым выпадающим списком и наоборот. Как я могу это сделать???

Answer 1

Один из способов сделать это - обобщить функцию фильтра и сохранить фильтры в редукторе. То, что вы могли бы сделать, - это действие filterData, которое принимает различные типы фильтров, представленных объектом (например, { product_side : '...', product_status : '...' })). Когда передается новый или существующий фильтр, его можно использовать для создания новых данных со всеми другими применяемыми фильтрами. После этого он может быть добавлен или обновлен в редукторе для поддержания состояния фильтров.

Рассмотрим следующий пример:

// 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 
     }); 
    // ... 
    } 

} 

Когда вы предоставляете таблицу, вы можете посмотреть на ваши свойства, чтобы увидеть, какие были применены фильтры, а затем фильтровать данные, соответственно, прежде чем вынести.