在 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 来说还是有点新。任何帮助表示赞赏。基本上，我正在尝试修改 state 上的当前数据属性，然后将其传递到数据可视化组件内的 data 属性中，如下所示：

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

Answer 1

似乎有 2 个地方可以做到这一点。

首先是你的异步动作创建者，当你得到响应时，你可以过滤响应数据并将其传递给你的成功动作创建者函数，以便它将过滤后的数据传递给reducer。最后，您的状态将使用过滤后的数据进行更改。

第二个地方是你的减速器。您可以在 reducer 中过滤 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']
      }))
    });
  }
}