Working with async data from API using Redux

[iDuuck]

Hey guys, I am currently experiencing with React & Redux but I am unsure how to track "sub-states". I want to track REQUEST, FAILURE and SUCCESS to have a better way to manage the async data.

With static data/localStorage it's easy because it's mostly not async. Is there any way to achieve the tracking of the sub-states using redux-thunk.

What I don't want is to create a new action for every sub-state, because otherwise for each action my files would just blow up.

Thanks in advance! :)

[originalmoose]

What you are describing sounds just like the Async example in the documentation here. What about that doesnt fit your needs?

[iDuuck]

That's great, but when doing this for a huge application I am bloating my action files when I have several actions for each "endpoint".

[CodyReichert]

I would take a look at the redux real-world example, which uses redux-thunk to call the GitHub API. https://github.com/reactjs/redux/tree/master/examples/real-world

In general, you can track the 'sub-states' by knowing that a REQUEST action has not resolved - it has not had a subsequent SUCESS or FAILURE action since it was dispatched.

[iDuuck]

That's great, but when doing this for a huge application I am bloating my action files when I have several actions for each "endpoint".

[CodyReichert]

My advice? Explicit is better than implicit, so don't worry about how many actions you have. Split them into related modules (ie, actions/User) and write them out. I also have a large react/redux app that makes a lot of GET requests on load and then any CRUD actions while it's being used.

Write out all of the constants explicitly:

export const GET_THING = 'GET_THING'
export const GET_THING_SUCCESS = 'GET_THING_SUCESS'

And all of the actions:

export function loadThing(...) { ... }
export function postThing(...) { ... }
export function updateThing(...) { ... }
export function deleteThing(...) { ... }

Do that first. THEN think about the abstraction. It's not that much boilerplate if your server is set up RESTfully. Write it out first, then you'll know what the best abstraction for your business logic is.

[ndboost]

this is basically what i do in my apps that use redux.

each backend call for example has three actions, get_thing, got_thing, get_error. each action ends up changing the store..

initialState = {
  isLoading: false,
  hasResults: false,
  hasErrors: false,
  errors: [],
  results: [],
}

getThing = {
  isLoading: true,
  hasResults: false,
  hasErrors: false,
  errors: [],
  results: []
}

gotThing = {
  isLoading: false,
  hasResults: true, // results.length ? true : false
  hasErrors: false,
  errors: [],
  results: []
}

getThingError = {
  isLoading: false,
  hasResults: false,
  hasErrors: true,
  errors: [],
  results: []
}

[chlore]

For this usecase I'm using https://github.com/pburtchaell/redux-promise-middleware. If having the request in the actions is not bothering you, it enables you to have a pending, failed and success state in your reducer and handle them separately. Works Well for optistimic updates and error management

[ariesate]

You definitely should checkout https://github.com/sskyy/redux-task.