状態変更後の初期状態を返します

Question

私のデータからのフライトのリストを含むWebページを開発する必要があります。私のデータは次のようになります：

[ 
    { 
     "id": 123, 
     "direction": { 
     "from": "Moscow", 
     "to": "Berlin" 
     }, 
     "arrival": "2016-06-08T19:52:27.979Z", 
     "departure": "2016-06-08T17:51:20.979Z", 
     "carrier": "S7" 
    }, 
    { 
     "id": 133, 
     "direction": { 
     "from": "Moscow", 
     "to": "Samara" 
     }, 
     "arrival": "2016-09-08T13:52:27.979Z", 
     "departure": "2016-08-08T17:51:20.979Z", 
     "carrier": "KLM" 
    }, 
    { 
     "id": 193, 
     "direction": { 
     "from": "Moscow", 
     "to": "New York" 
     }, 
     "arrival": "2016-06-08T21:52:27.979Z", 
     "departure": "2016-06-08T17:51:20.979Z", 
     "carrier": "Aeroflot" 
    } 
    ] 

私はキャリアによっても簡単なフィルタを持っています。これはオプションとHTMLでちょうどselectタグです：すべて、アエロフロート・ロシア航空、KLMオランダ航空、S7とonChangeイベントのリスナーで：

const mapDispatchToProps = (dispatch) => { 
    return { 
    onChangeHandler(event) { 
     if (event.target.value === 'All') { 
     dispatch(selectAllCarriers()) 
     } else { 
     dispatch(selectCarrier(event.target.value)) 
     } 
    } 
    } 
}; 

私はKLMを選択した場合、私はこの状態を返します。

[ 
    { 
     "id": 133, 
     "direction": { 
     "from": "Moscow", 
     "to": "Samara" 
     }, 
     "arrival": "2016-09-08T13:52:27.979Z", 
     "departure": "2016-08-08T17:51:20.979Z", 
     "carrier": "KLM" 
    } 
    ]; 

すべてを選択すると、フライトの全リストを返さなければなりません。

const flights = (state = initialState, action) => { 
    switch(action.type) { 
    case 'SELECT_CARRIER': 
     if (action.carrier === 'All') { 
     return state 
     } else { 
     return state.filter(f => f.carrier === action.carrier); 
     } 
    default: 
     return state; 
    } 
}; 

しかし、私はKLM を選択し、自分の状態が今だけKLM便が含まれているためすべて後、私はちょうどKLM便を持っている場合：私は、減速機でそれを実装しました。私は自分の問題を解決して初期状態を返す最良の方法は何か分かりません。

Answer 1

stateからデータを削除する代わりに、セレクタを使用する必要があります。キャリアを選択するときは、使用しているセレクターをストアで設定し、セレクターを使用してフィルタリングしますが、ストアから他のフライトを削除しないようにする必要があります。

Reduxでセレクタを使用する方法については、Dan Abramovのこのリンクを参照してください。 https://egghead.io/lessons/javascript-redux-colocating-selectors-with-reducers?course=building-react-applications-with-idiomatic-redux

Answer 2

レデューサーでフィルタリングするのではなく、コンポーネントのselect関数で生データをフィルタリングする必要があります。フィルタ便にアクセスするために

const initialState = { 
    flights: [], 
    filter: undefined 
}; 
const flights = (state = initialState, action) => { 
    switch(action.type) { 
    case 'SELECT_CARRIER': 
     return { 
     ...state, 
     filter: action.carrier 
     }; 
    case 'SELECT_ALL': 
     return { 
     ...state, 
     filter: undefined 
     }; 
    default: 
     return state; 
    } 
}; 

そして今：この小さな変更を考えてみましょう

const flightsSelector = (state) => { 
    if (state.filter) { 
    return state.flights.filter(f => f.carrier === state.filter); 
    } 
    return state.flights; 
};