javascript - 在 Redux 操作创建器中过滤数据？

Question

我正在尝试决定在 React/Redux 应用程序中的哪个位置来过滤我使用 axios.get() 获取的 JSON 数据。基本上，我希望能够选择我想要的数据“ View ”，并根据该选择过滤数据。

这应该在 Action 创建者内部完成吗？示例:

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

如果是这样，我应该为每个不同的 View 都有一个 Action 创建者吗？对于 React/Redux 来说还是有点陌生​​。任何一点帮助都会受到赞赏。基本上，我试图修改状态的当前数据属性，然后将其传递到数据可视化组件内的 data 属性，如下所示:

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

Answer 1

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

第一个地方是你的异步 Action 创建者，当你收到响应时，你可以过滤响应数据并将其传递给你的成功 Action 创建者函数，以便它将过滤后的数据传递给 reducer 。最后，您的状态将随着过滤后的数据而改变。

第二名是你的 reducer 。你可以在你的reducer中过滤action.data。没有什么不妥。过滤您的数据，返回带有过滤数据的新状态。就我个人而言，我会在 reducer 中执行此操作。这样 Action 创建者只需传递响应，然后我就可以在 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']
      }))
    });
  }
}