Reduxアクション作成者のデータをフィルタリングしますか？

Question

私はaxios.get()で取得しているJSONデータをフィルタリングするReact/Reduxアプリケーションのどこにあるのかを判断しようとしています。基本的には、私が望むデータの「表示」を選択し、その選択に基づいてデータをフィルタリングできるようにしたいと考えています。

これはアクション作成者の内部で行う必要がありますか？例：

export function fetchData() { 
    axios.get(DATA_URL) 
    .then(res => { 
     // logic to filter only most recent 7 pieces of data 
    }); 
} 

もしそうなら、異なるビューごとにアクションクリエイターを用意する必要がありますか？まだReact/Reduxの新機能です。助けの任意のビットが高く評価されます。基本的に私は状態の現在のデータプロパティを変更してから、そのようななどのデータ視覚化コンポーネント内data属性にそれを伝承しようとしている：

<LineChart data={this.state.data} /> 

Answer 1

これを行うには2ヶ所があるようです。

レスポンスを取得すると、最初の場所が非同期アクション作成者です。レスポンスデータをフィルタリングして成功アクション作成者関数に渡すことで、フィルタ処理されたデータをレデューサーに渡すことができます。最後に、状態はフィルタリングされたデータで変更されます。

2位は還元剤です。あなたはあなたの減速機でaction.dataをフィルタリングすることができます。それには何も問題はありません。データをフィルタリングし、フィルタリングされたデータで新しい状態を返します。個人的には、私は減速機でこれを行うだろう。アクションクリエイターがレスポンスを渡すだけなので、減速機でデバッグすることができます。両方の方法が可能です。

例：あなたがユーザーを示すためにgithubのからデータを取得したい

：だからあなたが言っているものに基づいて

/* 
    CONSTANTS # just variables to refer in your actions or reducer 
    you want to change your state for 3 different points 
    1- Request started 
    2- Request ended with success, you have the data you requested 
    3- Request ended with failure, you have error message as response 
*/ 
let 
    GET_GITHUB_INFO = 'GET_GITHUB_INFO', // for request started 
    GET_GITHUB_INFO_SUCCESS = 'GET_GITHUB_INFO_SUCCESS', // for request success 
    GET_GITHUB_INFO_FAIL = 'GET_GITHUB_INFO_FAIL' ; // for request fail 

/* 
    REDUCER # the function called in Redux createStore when you 
      # dispatch action (look at the source code for createStore) 
*/ 

let reducer = (state, action) => { 
    case GET_GITHUB_INFO : // when you dispatch action to start request 
    return { 
    loading : true, /* # we changed our redux state to let components know 
         # request started. Component can show spinner etc. */ 
    loaded : false, /* # change loaded state if it has changed before, for 
         # for instance think about a second request */ 
    error : false /* # change error state if it has changed before, just 
         # like loaded case above */ 
    }; 
    case GET_GITHUB_INFO_SUCCESS : /* # you dont manually dispatch action for this 
            # from component, instead you write the code 
            # which dispatches action for this in your 
            # async action creator function. more on this 
            # later */ 
    return { 
    loading : false, /* # we changed our redux state to let components know 
         # request ended. Component can hide spinner etc. */ 
    loaded : true, /* # change loaded state because we have no error, we got 
         # success from our promise, more on that later */ 
    error : false /* # no error */ 
    } 

} 

// actions 

export function getGithubInfo() { 
    return { 
    type : GET_GITHUB_INFO 
    } 
}; 
export function getGithubInfoSuccess(data) { 
    return { 
    type : GET_GITHUB_INFO_SUCCESS, 
    data 
    } 
}; 
export function getGithubInfoFail(data) { 
    return { 
    type : GET_GITHUB_INFO_FAIL, 
    data 
    } 
}; 
export function getGithubInfoAsync({view,id}){ 
    // you ll only call this action from your component 
    return function(dispatch) { 

    dispatch(getGithubInfo()); 

    axios.get(DATA_URL) 
    .then((response) => { 
     /* filter your response and pass to action creator function */ 
     dispatch(getGithubInfoSuccess(response.data)); // { type :"",views : ...} 
    }) 
    .catch((error) => { 
     return dispatch(getGithubInfoFail({ 
     error : error['error_message'] 
     })) 
    }); 
    } 
}