Jose Jose - 1 year ago 144
Javascript Question

Filter data within Redux action creators?

I'm trying to decide where inside my React/Redux application to filter the JSON data I'm fetching with

. Basically I want to be able to select which "view" of data I want and filter through the data based on that selection.

Should this be done inside an action creator? Example:

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

If so, should I have an action creator for each different view? Still a bit new to React/Redux. Any bit of help is appreciated. Basically I'm trying to modify the current data property on state and then pass that down into a
attribute inside a data visualization component like such:

<LineChart data={} />

Answer Source

There seems to be 2 places to do this.

First place is your async action creator when you get the response , you can filter the response data and pass it to your success action creator function, so that it passes filtered data to reducer. Finally your state will be changed with filtered data.

Second place is your reducer. You can filter in your reducer. There is nothing wrong with that. Filter your data, return your new state with filtered data. Personally, I would do this in reducer. So that action creators are just passing the response then I can debug it in reducer. Both ways are possible.


You want to fetch data from github to show users :

   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
  GET_GITHUB_INFO = 'GET_GITHUB_INFO', // for request started
  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 {
export function getGithubInfoFail(data) {
  return {
export function getGithubInfoAsync({view,id}){
  // you ll only call this action from your component
  return function(dispatch) {


    .then((response) => {
      /* filter your response and pass to action creator function  */
      dispatch( getGithubInfoSuccess(; // { type :"",views : ...}
    .catch((error) => {
      return dispatch(getGithubInfoFail({
        error : error['error_message']
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download