フィルタリング済みで既にフィルタリングされた状態

Question

私はreact-reduxを初めて利用しているので、今日の課題に対処することは難しいです。私に説明させてください。

ドロップダウンの目的は、ダミーデータを最初に並べ替え、2番目をステータスでフィルタリングすることです。

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を渡したときに当然です。 目的の機能は、データをフィルタリングするための最初のドロップダウンを選択した後、2番目のドロップダウンでフィルタリングする必要があるデータを選択し、2番目のドロップダウンでデータを選択します。これどうやってするの？？？

Answer 1

これを行う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 
     }); 
    // ... 
    } 

} 

、あなたのテーブルをレンダリングするとき、あなたはフィルタが適用され、その後、あなたがレンダリングする前に、それに応じてデータをフィルタ処理されているかを確認するためにあなたの特性を見ることができます。