React Flux: Actions

InstructorJoe Maddalone

Share this video with your friends

Send Tweet

Actions contain no functionality, but rather describe an event in our application. In this lesson we will describe our Actions as they relate to our application. These Actions will then be available for triggering in our Views and for execution in our Store.

Sean Coonce
~ 6 years ago

What's the best way to scale app-actions.js as your app becomes more and more complex? Is it suitable to simply append all of your apps actions to what could become a potentially massive file?

Joel Hooks
~ 6 years ago

What's the best way to scale app-actions.js as your app becomes more and more complex? Is it suitable to simply append all of your apps actions to what could become a potentially massive file?

I'm not an expert, but as I see it, you are dividing your application up into many small applications, so each would have actions that corresponded to the functionality of the individual module.

Perhaps Flux gives a better idea about this in practice.

Gabriel
~ 6 years ago

It's important to remember, that this Lesson use the 'react/lib/merge', and this lib 'll be deprecated on the next version of React, if you want to keep your code up to date, run the following line in your terminal (make sure to execute this inside your project directory): npm install object-assign --save

After that, replace this: var merge = require('react/lib/merge');

for this: var assign = require('object-assign');

And, everywhere that you use the 'merge', you replace with 'assign';

Omer
~ 6 years ago

I used the dispatcher from Facebook’s Chat Example to build the dispatcher and it should look like this now:

<pre><code> var Dispatcher = require('flux').Dispatcher; var assign = require('object-assign'); var AppDispatcher = assign(new Dispatcher, { handleViewAction: function(action){ console.log('action', action); this.dispatch({ source: 'VIEW_ACTION', action:action }) } }); module.exports = AppDispatcher; </code></pre>
Omer
~ 6 years ago

This is the right dispatcher

Christopher
~ 6 years ago

be sure to: npm install flux --save

if you use this dispatcher

Christopher
~ 6 years ago

Thanks for these corrections! They work!

Sean Inglis
~ 6 years ago

Thanks for this Gabriel - spent a bit of time blundering around in the source tree

I've been manually following the videos as a way of bumping up my React muscle memory so haven't benefitted from any corrections in the downloadable source.

Lachlan
~ 6 years ago

Thanks mate appreciate it.

Cyrus
~ 6 years ago

Thanks for posting this man! It really helped!

Alexius Wronka
~ 6 years ago

I need to create and add users to a MongoDB with react. Will this tutorial help?