2016-09-28 8 views
1

ページロード時に最初に表示するJSONデータが大量にあり(これまでのところ作業中)、そのデータをフィルタリングして特定の量だけを表示するオプションがあるとします。 FILTER_DATAアクションがディスパッチされると、viewプロパティがチェックされ、ヘルパー関数が実行され、データの配列が表示されます。Redux:Reducerでデータをフィルタリングして初期データ状態に巻き戻しますか?

しかし、フィルタリングされたバージョンのデータで状態を更新していて、元のビュー(データセット全体)に戻したい場合、状態を巻き戻す方法がありますその点まで?私はもう一度データを取得するためにGET要求を再実行するために、FETCH_DATAアクションを再ディスパッチすることを検討していましたが、それは不愉快に思えます。思考?以下 は私の減速である:

注:data初期状態オブジェクトでFETCH_DATA_SUCCESSディスパッチされるまで空の配列値であり、GET要求でフェッチJSONデータにstate.dataを設定します。

const app = (state = initialState, action) => { 
    switch(action.type) { 
    case FETCH_DATA: 
     return { ...state, error: '', loading: true }; 
    case FETCH_DATA_SUCCESS: 
     return { ...state, error: '', loading: false, data: action.data, view: 'all' }; 
    case FETCH_DATA_FAILURE: 
     return { ...state, error: action.error, loading: false }; 
    case FILTER_DATA: 
     let data; 
     if (action.view === 'week') { 
     data = groupData(getLastWeek(state.data), action.view); 
     } else if (action.view === 'month') { 
     data = groupData(getLastMonth(state.data), action.view); 
     } else if (action.view === 'all') { 
     data = state.data; 
     } 
     return { ...state, error: '', loading: false, data: data, view: view }; 
    } 
    return state; 
} 

ありがとうございます。

答えて

3

主なオプションは2つあります。まず、 "フィルタリングされた"データを自分の状態に直接保存したい場合は、 "元の"バージョンと "フィルタを適用した"バージョンの2つのコピーを保存できます。

私が推奨するもう1つのアプローチは、元のデータとフィルタリング基準の両方を自分の状態に保つことですが、元のデータは実際には変更しません。代わりに、必要に応じて店舗の外部でフィルタリングを派生させます。これは "セレクタ関数"の大きなユースケースです。いくつかの例については、http://redux.js.org/docs/recipes/ComputingDerivedData.htmlを参照してください。

関連する問題