REACT FLUX TUTORIAL #11 - The Flux Dispatcher Video Lecture | Learn and master: Flux - Game Development

so we're at the place where our
components is pulling the initial
information from the to do store and
then we're also listening to that to do
store we're going to update whenever it
changes so the next piece to put into
play for flux is let's add a dispatcher
now and let's register our store to that
dispatcher so any actions that come
through the pipeline our store will get
notified to all of them and get a chance
to respond so that's actually very very
simple to do we just want to use fluxes
dispatcher so npm install s flux there
you go that's going and then let's go
ahead and create a dispatcher file we're
going to call this dispatcher j s Spach
rj s and all we do is import fluxes
dispatcher and then we're just going to
export defaults new dispatcher that's it
so we've created a flux dispatcher and
that's what you get when you import
dispatcher j s so now our to-do store
can actually register itself as a
listener to the dispatcher and that's
just as simple so we're just going to go
import dispatcher from dispatcher and
then all we do down here is we do
dispatcher register there's really only
two dispatcher methods that you use use
register to register a new listener
which in this case is our to-do store
and then you're actually going to do
dispatcher dispatch which is what all
our actions will use to dispatch actions
so in this case we're doing a register
then we need a method here that's going
to handle all of our actions if you
remember again every action that's
happens across the app is all going to
get handled by every listener so we want
something here that's going to handle
actions so on my to-do store I'm just
going to create a handle actions method
and there will be the Athenaeum method
and we'll just call it their to-do store
receive and action and they'll spit out
what the action is okay and then so
we're just going to register to do store
handle
actions and we're going to bind it to to
do store so that way the value of this
inside of here is to do store because we
want to do stuff like this dot create to
do you know if it's a create to-do
action we'll want to be able to call our
own internal methods so there we go
we've registered to do store bound it to
the right place and that's it we're good
to move on so let's go ahead and now
expose dispatcher globally so we can
play around with it
reload my app here I didn't run npm run
dev get that started up again okay we're
going
and now let's dispatch something let's
go dispatcher dispatch type some events
there you go to do store received in
action of some event type some event -
there we go so whatever event i dispatch
it's automatically going to be handled
by this handle actions method so now we
just need to only respond to the ones
that we care about if it's not something
that to do store cares about we just do
nothing so the easiest way to do this is
use an uncommon thing which is a switch
statement so we're going to use a switch
and we're going to switch based off of
action type if it's a type we care about
we do something if not we just move on
so in this case we're going to go case
if type is create to do then we're going
to do something inside of this block
which this is this create to do and
we'll say that text again is all that we
need to pass so we'll say that action
dot text will be what we pass through so
there we go that should work on a create
to-do event so let's go ahead and fire
create to-do event type is and it's a
standard to always use all upper case
because these are basically constants
and then text is going to be new to do
there we go
new to do appeared up there in our app
lets go new to do too new to do to
appeared up there in our app excellent
so
our dispatchers in place the only thing
we have to do is start giving it actions
and our flux circle is complete so let's
go ahead and add actions in the next
video