REACT FLUX TUTORIAL #9 - React Flux Introduction & Flux Stores Video Lecture | Learn and master: Flux - Game Development

if you've been watching my series on
react if you've kept up this far you
actually know quite a bit about react as
far as the official react library goes
so now we're going to learn flux react
by default doesn't really give you any
specific way to manage all the data for
your application it just has the ability
to receive props right you can inject
props into a component and the component
handles that but the the react library
doesn't really tell you how to give it
components where to store your data
that's why it's called just a view layer
react calls itself just a view layer
whereas the actual framework as compared
to say angular or backbone there really
is no framework with react you get to
create your own or use another framework
and that's where flux comes in flux is
not a framework it's a pattern that
Facebook has laid out a great pattern
for building react frameworks so using
flux you can build your own
that's very stable very good or you can
use another flux based framework that's
out there there are quite a few some of
them work differently than others but
they generally stick to this flux
pattern so what is the flux pattern well
you have your react components and those
are all your components and components
do two things in a flux pattern they
fire off actions and they listen to
stores so they fire off actions saying
hey maybe say it's a to-do list add a
new to-do that's a action and then
whenever the to-do list store updates it
receives an event for that and it
updates itself with all the new - duze
that's that's what the components are
aware of components fire off actions
they don't care what happens they just
know that if I'm listening to the to-do
list store and the to-do list store
updates then I'm going to change if
you're coming from a backbone.js world a
store is a collection if you're coming
from an angular world of stores maybe
more like a service there's really no
concept of stores and angular at this
point so that's what the components do
they listen to stores for changes and
they can interact with stores they can
say hey give me all - dues give me -
dues that match my filter
etc so components can maybe query a
store for information just like you
would with a backbone.js collection and
that's what components do actions are
aware of one thing only they pipe an
action to the dispatcher they don't care
what happens after that
but actions will pipe an action to a
dispatcher now an action might create
multiple actions I will get into that in
a minute and then the dispatcher is
basically a pub/sub if you know what
about if you don't know what a pub/sub
is you'll want to watch my video on that
it's a pattern of communicating events
it's basically a pub/sub with one major
difference pub/sub every module can
subscribe to a specific event or a
specific set of events and get notified
when that event takes place whereas a
flux dispatcher takes every single event
that comes through and sends it to every
single subscriber so if you have four
stores that are registered to the
dispatcher those four stores get every
single event and so that's the biggest
change is a store only reacts to the
events it cares about it will receive
every event and it only reacts to the
ones that cares about and the reason
this is a good idea with react is react
is going to give everybody the chance to
change rerender when anything changes
about our application when there's any
event at all any action everybody gets
the chance to change or update if they
want to because react can completely
rerender with a virtual Dom every time
and the Dom only gets up to vae up
updated the webpage only gets updated
when it needs to change the way it
appears since that's the slow part of a
JavaScript application is updating the
Dom updating your webpage so that's out
that's the react that this is the flux
framework components fire actions
actions are only aware the dispatcher
the dispatchers job is to be aware of
everyone who needs to hear about actions
every single store the dispatcher pipes
that action to every single store the
stores maybe ignore the action maybe
update themselves
they fire update events like hey the
to-do list has changed and then the
components listening to those stores
update them cell
selves and re-render the application
constants we'll get into a little later
some frameworks use this some frameworks
don't it's just a way of storing action
names is all it is because a store might
reference an action name and an action
might reference an action name let me
show you what an action actually looks
like an action in an action file will
simply say hey dispatcher dispatch this
event I've got an event type and the
dispatcher doesn't really care what this
object is it's just going to pass it
through to everybody registered so some
people will use type some people use
action type and so type is basically
what your action is called create to do
and then it might have some additional
data to it so the create to-do might
have a title the delete to do might just
have an idea associated with it because
that's all it takes to delete it to do
and then if a store wants to react to
the create to-do type it can if it
doesn't want to it doesn't have to
so that's flux let's go ahead and
actually take our basic to-do list
application and convert it to flux I've
got what we've been working with I just
change it from articles to dues so we're
going to build a to-do list with the
ability to favorite things and then the
ability to change settings you know
maybe show completed will be a setting
and then let's go and look at our code
base in this first video we're going to
be working with two different components
we're working with the two do's
component which as you guessed is the
entire to-do list and then a to-do
component which is a single to do and so
you should be familiar with this if
you've been following along the two do's
component starts off by setting a state
which is an array of to do's so this dot
state dot two dues is to two do's and
then it pulls them in and it maps them
out to an array of to do components and
we're changing one thing we're using the
ID as a key which is a much better key
than in the index in the array so then
we're just spitting out those to do
components that's all that's really
going on we just want to make this
dynamic so we need to pull this out into
a store let's go and create our first
flux store so I have my stores folder
here
let's just say this as to do store such
a s and all a store really does is it
just kind of exports an object the one
thing we need to do is if you remember
from flux let me go back over here
components need to be able to listen to
actions on the store like component
needs to be able to say on to do store
change or to do store on change do
something right I need to be able to
react when the to do store has a change
event so to do this it's really simple
you simply import events emitter which
comes with nodejs
this events module is built into nodejs
and I can actually just import an event
emitter and then extend it so Mike to do
store there we go so now if I were to
create a new to do store equals new to
do then I can actually go to do store
dot on change and then do some handler
so that's good so now we've got our
events done I can export defaults to do
store so now I'm exporting that so
whenever you import to do store you're
going to get this created instance of to
do store great so I've got events going
and now let's actually just kind of
create my to-do list we'll just go super
this to dues equals it will actually
start it off with this fake data we got
going on here let's just set it to be
some fake data there you go my two dues
are by default two two dues and that's
it and maybe I'll do a get all method so
somebody else can call to dues get all
and this will just return this dot two
dues excellent so that's in the to-do
store now I can actually take this away
and I can actually import my to dues
store import
importing that and then my default state
will be to do store get all so that's my
initial State I'm going to start off
with a get all and then everything
should be working as it was before let's
go ahead and rerun to my page excellent
it's working let's go ahead and change
my to-do store and make sure that that
still updates pay water bill it updated
okay so my information is coming from
the store excellent so now let's go
ahead and import a dispatcher create a
dispatcher in this next video so we can
actually start dispatching events and
changing this store