REACT FLUX TUTORIAL #10 - Flux Store Events Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

sorry baby I wasn't listening I was too
busy fixing my flux dispatcher you see
it wasn't admitting the constants to the
storage properly yes as I'm sure you're
aware by now flux and react use a lot of
words that are kind of new to the
JavaScript community so once you get
over that kind of initial terrifying oh
my goodness what are you talking about
then you wrap your head around what
those words mean and flux really isn't
complicated at all just hard to
understand when people forget what it's
like to have not heard those words and
try to communicate it to you so where
our app is so far is we have our
component our to-do list components and
we are pulling all of our - dues from
the store
so next up let's actually get this to be
more dynamic to where when our store
changes it emits a change method and
then our component can automatically
stay updated as the store that SRIA lis
easy to do so let's go ahead and add a
create to-do methods so creates to do
and I'm on my store right here
actually I'm not I'm on my page let's go
to my store go to my store let's do add
a create to-do method and now we
probably only need to receive our text
and so then all we're going to do is
this to do stop push we're going to push
a new one on to the array and we need
the text completes will be false by
defaults and then we also need an ID so
for now I'm just going to kind of hack
an ID in here and we're just going to go
date now which just prints off a
timestamp if you go over here and say
date now that's just going to always
give me a timestamp so as long as I'm
not firing to date now's in the exact
same millisecond I'm fine for this app
scenario that I'm doing so let's also
add in the ID so we have ID text and
completes and then all we have to do is
omit a change event and we just have to
go this omit change so on change someone
else can get that event so now let's
just go back to our - dues page and
there's a awesome thing that's in the
react component called components wheel
mounts whenever the component
is about to render to the Dom for the
very first time and the first time only
it will fire the component will mount
function if it exists so this is a great
place to add event listeners because you
only have to do it when it gets rendered
and it only happens once so at this
point we go to do store on change and
let's give it a function arrow function
so it automatically binds to this I can
go this dot set state to Do's and we're
basically going just update our two dues
with the to-do store get all
so whenever to do store changes we
update our state very simple add
semi-colons which are no longer
necessary with our trance placing so
great that should be working here's how
we can test that is we can just expose
our to-do store globally for now equals
to do store so now I can actually access
that from the console I can go to store
dot creates to do excellent test to do
showed up test to do to showed up so now
our component is dynamically updating
whenever the store changes our next set
step to do is going to be to wire in a
dispatcher so any events can come
through to the store so let's go and
create a flux dispatcher