在 Redux action creators 中过滤数据？

Question

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

过滤数据

这应该在 action creator 中完成吗？示例：

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。您可以在减速器中过滤 action.data。没有什么不妥。过滤您的数据，return 您使用过滤数据的新状态。就个人而言，我会在 reducer 中执行此操作。这样 action creators 就可以传递响应，然后我可以在 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']
      }))
    });
  }
}

在 Redux action creators 中过滤数据？

Filter data within Redux action creators?

javascript

reactjs

redux

axios