3

I am very new to Redux so please bear with me now. My friend suggested that instead of having my axios calls inside of my componentDidMount() I should place them in an action file. Here's the snippet:

  componentDidMount() {
    axios.get('http://xxxx/customers').then(res => {
      this.setState({
        res,
        customer: res.data
      })
    })

    axios.get('http://xxxx/events').then(res => {
      this.setState({
        res,
        event: res.data
      })
    })

    axios.get('http://xxxx/locks').then(res => {
      this.setState({
        res,
        lock: res.data
      })
    })
  }

And I understand that to change the application's state I need to dispatch and action: enter image description here

But the thing is that I am really uncertain how to set this all up. If anyone has some tips I'll be really happy to take them.

2
  • 1
    Take a look at sagas (github.com/redux-saga/redux-saga), it's a good solution for your problem. Jul 31, 2017 at 13:15
  • 1
    If this guy doesn't master redux, there is no need for redux-saga. He has to understand how actions work. It's still fine to request in your componentDidMount (Before using saga, I used an API layer to trigger my actions). Just try to dispatch an action in your axios promise
    – Nevosis
    Jul 31, 2017 at 14:05

4 Answers 4

2

basically you should avoid updating the states using setState directly if you are using redux in project

here is a sample react-redux-axios for the reference,which will give a good understanding regarding flow.

https://github.com/johibkhan2/react-redux-singlePageApp

0

The picture illustrates the basic architecture of redux and how redux works. There are three main things that come up in redux : actions, reducers, store. Actions and nothing but functions which dispatches some data and depending on that the state changes. Next is the reducer, reducers are pure functions which don't have side effects.Then comes the store which consists of a kind of bucket in which all your state variables are stored which helps in the rendering of data. So now what you could do is make a call to API inside of actions and then call that function from ComponentDidMount. This action must dispatch some data and thus you must consider using redux-thunk for the purpose, which is used for async calls in redux. This could be the very basic things that can help you get going. You might consider taking this course. This according to me is the best course for learning react and redux.

0

You might not need redux. For simple async state management this pattern might be helpful with async/await. You can do something like this:

async componentDidMount() {
    const res1 = await axios.get('http://34.248.65.20:3000/customers')
    const customer = res1.data

    const res2 = await axios.get('http://34.248.65.20:3000/events')
    const event = res2.data

    const res3 = await axios.get('http://34.248.65.20:3000/locks')
    const lock = res3.data

    this.setState({
        customer,
        event,
        lock
    })
}

Redux is only useful if you need access to this data throughout your application. Otherwise it just adds a lot of boilerplate. If you do need access to the API data throughout your app, ignore this answer.

4
  • This code performs requests in sequence potentially tripling load time. Jul 31, 2017 at 20:55
  • No, it's asynchronous and non-blocking. It's superior in that it only calls setState once instead of three times, eliminating three renders.
    – inostia
    Jul 31, 2017 at 21:45
  • Oh I see what you mean... Well yeah I guess if the requests weren't in sequence here it would update UI state at different times, but generally it's better from a UI perspective to update as little times as possible (in my opinion).
    – inostia
    Jul 31, 2017 at 21:50
  • "generally it's better from a UI perspective to update as little times as possible" true but unrelated to what I said. :) You code would send next request only after the previous is done. This is bad idea if request are independend as if in this case. const [customer, event, lock ] = (await Promise.all(urls.map(url => axios.get(url))).map(res => res.data) to run requests in parallel. Aug 1, 2017 at 6:00
0

There is another library like Redux, the Dynadux.

You can create more sophisticated stores and simply in the componentDidMount you can call store.fetchEntities() without need the await.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.