在Redux動作創建者中過濾數據？

Question

我試圖決定在我的React/Redux應用程序裏面用來過濾我用axios.get()獲取的JSON數據。基本上我希望能夠選擇我想要的數據的「視圖」，並根據該選擇過濾數據。

這應該在動作創建者內完成嗎？例如：

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個地方要做到這一點。

首先是您的異步​​操作創建者，當您獲得響應時，您可以過濾響應數據並將其傳遞給成功操作創建者函數，以便將過濾的數據傳遞給Reducer。最後你的狀態將被過濾的數據改變。

第二位是你的減速機。你可以在reducer中過濾action.data。沒有什麼不妥。過濾您的數據，使用過濾的數據返回您的新狀態。就我個人而言，我會在減速機中做到這一點。所以動作創建者只是傳遞響應，然後我可以在reducer中進行調試。兩種方式都是可能的。

例：

你想從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'] 
     })) 
    }); 
    } 
}