REACT FLUX TUTORIAL #13 - Asynchronous & AJAX Flux Actions

Let's do asynchronous flux actions now! We can easily load in data via Ajax and trigger multiple dispatches as the data loads. This will result in our React app remaining synchronous while the Flux portion handles all the async operations.

GET THE SOURCE CODE:

React JS #1: Intro & Workspace Setup

React JS #2: Anatomy of a Component

React JS #3: Composing Multiple Components

React JS #4: State, Props & Data

React JS #5: Events & Data Changes

React JS #6: React Router & Intro to Single Page Apps

React JS #7: React Router Params & Queries

React JS #8 - React Inline Styles & Component Arrays

React JS Flux #9 - React Flux Tutorial

React JS Flux #13 - Async Flux Actions

-~-~~-~~~-~~-~-
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
-~-~~-~~~-~~-~-

[northshorepx]

What an excellent course. I've learned more flux in 30 mins than I ever thought I would. Thanks!!!!

[monicagallegos]

Thanks for putting these together Will. You've done a great job creating videos that are clear and concise.

[KushalPandya]

With your tutorial playlist, I learned React way faster than I could with any other tutorials, thanks a lot! as I'll be migrating a huge ExtJS app into React in my day job.

[AnitamDas]

The official tutorial explained the Flux pattern like it was rocket science, thanks for the videos Will. You are a true mentor!

[Tuikku]

These videos helped me pickup React! Thank you so much for doing them. I hope to see more tutorial videos on other stuff in the future :)

[andrewkicha]

Thank you! Man, you explain better than Codeschool and Treehouse together )

[leedavid]

Great tutorials, easy to learn Webpack, React and Flux. Thank you very much.

[Balaji-cvbz]

Thanks for the video tutorial, Explanation and walk through is Superb!!

[vladtrofimov]

the best tutorial i`ve seen, thank you a lot

[bgva]

Thanks for all videos I have learned a lot.

[raccoon]

This is much better and easier to understand than that stupid official tutorial....

[reastyn]

Thank you for these tutorials! I finally understand flux architecture! Would you please continue with Redux (+ react-router)?

[valikonen]

I don't understand why you don't use something like json-server to play with real data...for real examples.

[markburns]

You hint at making a network call within the TodoActions file. Do you feel like this is the correct place to handle the network calls? Personally I felt like that network calls should be encapsulated within TodoStore (based on the name). What are your thoughts?

[flaredev]

'hug your wife actually we should do that often' xD man you made my day

[danangarbansanur]

Thanks to you, i just learn React.js for 1 week and already implement it in my projects.

I just wonder, is there a best practice to load initial data from the server side in the store ? Is it okay for me to do ajax request in the store's constructor?

Thanks in advance

[bot]

one question: how do you toggle the todo lists when you click on reload button?

[fredp]

I was getting errors using the switch statement. The syntax that worked for me is:

switch(action.type) {
case "CREATE_TODO":
this.createTodo(aciton.text);
break;
case "RECEIVE_TODO":

break;
}

[coderider]

At 3:32 you have FETCH_TODOS and RECEIVE_TODOS, but you never handle FETCH_TODOS. Why? And if you don't handle it, why even have it?

[jatinthaman]

Great Tutorials! When I'm putting static data in RECEIVE_TODOS, it is working but using axios its not working. The data isnt showing up on the app and no error is shown.