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

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

当您获得响应时，第一个位置是您的异步操作创建者，您可以过滤响应数据并将其传递给您的成功操作创建函数，以便将过滤后的数据传递给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']
      }))
    });
  }
}

在Redux动作创建者中过滤数据？

1 个答案: