REACT FLUX TUTORIAL #12 - Flux Actions Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

okay our flux circle is almost complete
we have a dispatcher that's dispatching
actions to anyone that listens in this
case that's our to Do's
store and then our to-do store updates
itself accordingly and dispatches a
change event which components can listen
to if they want to
now this seat may seem like a few too
many steps just for to-do app but what
we've done is we've created this setup
to where as our app grows in complexity
up to hundreds and thousands of
different types of actions our stores
only listen to the actions they care
about they don't have to change our
components only listen to the stores
they care about and only fire off a
handful of actions the ones that they
need to so we've got this highly
decoupled framework that's always going
to re-render all the time and it's just
really really stable flux apps are very
very stable so all we need to do to
finish this circle up is add in our
actions and that's actually the simplest
part now let's go and just create an
actions folder actions there we go and
let's create a new file inside of there
which all be our two dues actions or to
do actions which is so all we need to do
in an action is we just have to dispatch
something so let's import our dispatcher
import our dispatcher and let's start
exporting some stuff you could export an
object like that you could do export
defaults and then you could do stuff off
this chain or create to do is going to
be a function so you could export a
object literal like that but the es6 way
that's a little cleaner is going to be
export create to do just define them
like this so that way they'll
automatically get a name and then if you
created to do with text we're simply
going to dispatch an event or an action
we're going to dispatch this event we're
going to pass in the text that's it
we've got our create to-do action and so
let's go ahead and maybe make a second
one delete to do which we won't use
right now and that will have an ID and
this one will be delete to do and we're
just going to pass in the ID so now we
have two methods on that let's go to our
two do's component because you remember
to do the component cares about the
stores and the actions that's all it's
connected to so let's go to our two do's
component here and let's import the
actions we've already got the store in
there let's go imports there we go to do
actions are in and let's make a button
that simply always creates a new to do
so let's go ahead and make a button here
create and then on click we're going to
go this dot create to do find this let's
go ahead and make that now create to-do
and let's just always create something
with a random timestamp so in this case
I need actually we're going to import
these star as to do actions so that way
we're basically going to import every
single export and it's going to be just
like we did an object literal you're
going to end up with an object if you
remember from our to dues actions if you
import star as to dues actions then
you're going to end up with an object
that looks like this you've got your
create to-do function and they've got
your delete to do function so that's
what the import star is it's a nice
clean way of defining your functions
it's a nice clean way of importing them
all so now we have to do is go to do
actions creates two and let's just pass
in let's just go date now again so it'll
be just a random timestamp string every
time we hit that button let's go back to
our page and let's click on that button
there
go you can see every time I click it
it's adding a new one to the list
yippee and that new one also have a
random ID which will be pretty much the
same thing so now we've created our
actions and the circle is complete it's
extremely simple for our to-do list to
handle things we could easily make this
an input and whenever the button clicks
we're going to grab the value out of the
input and we're going to create it to do
with that title as well very very simple
we've made the actions in the next video
let's look at how do we handle
asynchronous actions like say when I
click this button I want to load two
dews from my back-end API and then I
want to spit them out we're going to get
into that in the next video