0

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

这应该在动作创建者内部完成吗？例子：

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} />
4

1 回答 1

1

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

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

第二个地方是你的减速器。您可以在 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']
      }))
    });
  }
}
于 2016-09-24T20:40:17.127 回答