필터링 중이고 이미 필터링 된 상태입니다.

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

. 내 문제는 내가 그리드의 데이터로 filtered_data_by_side를 통과했을 때 첫 번째 작업 만 발생하고 filtered_data_by_status를 통과했을 때 물론 두 번째로 합리적입니다. 원하는 기능은 데이터를 필터링하기 위해 첫 번째 드롭 다운을 선택한 다음 두 번째 드롭 다운에서 두 번째 드롭 다운으로 필터링해야하는 데이터를 선택하는 것과 그 반대의 경우입니다. 내가 어떻게 할 수 있니?

Answer 1

이렇게하는 한 가지 방법은 필터 기능을 일반화하고 감속기에 필터를 유지하는 것입니다. 객체가 나타내는 여러 유형의 필터 (예 : { product_side : '...', product_status : '...' }))를 취하는 액션은 filterData입니다. 새 필터 또는 기존 필터가 전달되면 다른 모든 필터가 적용된 새 데이터를 생성하는 데 사용할 수 있습니다. 그런 다음 필터의 상태를 유지하기 위해 감속기에서 추가하거나 업데이트 할 수 있습니다.

는 다음과 같은 고려 :

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

} 

당신이 당신의 테이블을 렌더링하면 필터가 적용되었는지 확인할 당신의 속성을 볼 수 있습니다, 다음 렌더링하기 전에 그에 따라 데이터를 필터링 할 수 있습니다.