MobX tutorial #1 - MobX + React is AWESOME Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

in this video we are going to cover mob
X which is a fun and I do mean fun and
simple simple simple way to put a data
layer to your react application because
after all react really shines the
brightest when it is nothing really more
than a functional reactive UI
slash view layer to all the data in the
state of your application which lives
outside of react so mob X + react and
you basically have a framework and it's
extremely simple again extremely fun to
use the work that it takes to get
started with something like redux or
relay or even flux is sometimes daunting
and unnecessary I didn't realize just
how unnecessary it was until learning
mob X so we're just going to have fun
with this
here's what we have going on so far as
we're just rendering a to-do list
component and that to-do list components
just saying mob X that's all that's
going on now to work with mob X you're
going to need two babel transformers
well you won't need them you can do it
without them but it's a lot easier and
much more enjoyable and that's
decorators which is called decorators
legacy since the spec is potentially
still in flux but it's safe to use a
transformer no problem and then you'll
want to do transform class properties as
well you'll also want to be using react
15 or newer so let's go ahead and
install mob X and mob X react so those
are installing and once those are done I
can just do NPM start again to get my
hot reloading back up and going ok
that's running my application is hot
reloading again so I have mob X
installed let's go ahead and start
around with our actual data layer so we
can have some fun with this I'm going to
go to main J ass and just start
importing Nats that's import store from
to do store so you can see we have main
J s to do list J s which is our actual
to do this component and that to do
store I'm going to go ahead and close
that now to give us a little bit more
screen space and let's go ahead open up
this to-do store and have some fun with
mob X the one thing we need to import to
get started is observable from mob X
now if we were going to go the simplest
not necessarily the most stable but the
simplest route with data we do an object
literal we do something like store
equals and then we'd say oh we've got
our to Do's our to do is our an array
and then we might do create to do this
is what we did back in the day right so
we have this create to-do method that
would push something onto the to-do
state we couldn't really react to it
from the UI we couldn't really notice
when changes happened we had to build
all that in manually but it sure was a
simple way to code out a store with mob
X we basically get to code in the same
manner we just get all those reactive
functional features and it's much more
enjoyable and much more powerful so
we're basically going to make a class
there's class to do store and we can go
to do x' equals that except for we're
simply going to make them observable now
let's say we also want to have a filter
so we can filter these to do's again
observable and there's no filter on
there right now let's go ahead punch in
some to do is let's say we're going to
get milk we're going to buy milk and
we're going to buy eggs two things we're
going to buy very important to have and
then let's say when you actually require
this at export say to do store severe to
do severe store equals new to do store
and that's what we're going to export as
defaults and then I did it this way so I
can actually expose it as window dot
store as well and play around with it in
the terminal completely unnecessary
except for debugging so now stores
available here in the terminal and if I
want to see that my changes are actually
reacting I want to import auto run this
is something we're just going to do for
messing around in debugging here but I
can do auto run and give it a function
and then this will run whenever the
store changes so I can console.log
let's see store dot filter and I can
also console.log store dot two dues zero
so this will run the first time because
it changed we have no filter which is
right there I know some people with no
filter anyway and then we can also bind
and you remember I expose store to
window dot store so I can actually
change this and we'll see that auto run
fire let's say store filter equals milk
only things that say milk ah now my
filter has changed and store to do zero
is still buy milk well let's change the
to do equals buy cheese we're going to
go with a different dairy product there
we go now reloaded the filter is milk
and store to do zero is buy cheese if I
were just to look at store dot to dues
it's not just an array it's an
observable array when you change things
it's actually firing off all these
change events or if I were to look at
store to dues I'm sorry store filter you
can see that it looks like it's just a
simple string how are they firing off
all this change events they're using
getters and setters so you can look up
es6 getters and setters if you want to
learn more about the technology behind
mob x now for those of you who are
familiar with react you're probably
already thinking your mind oh my
goodness i see how this works i simply
instead of doing an auto run have react
render whenever something changes and
that's exactly what we're going to do
let's go ahead and get rid of this auto
run here and we're going to
automatically update when things change
so let's just pass this in as a prop
that's there and let's go to our to-do
list here and then all we have to do in
order to be able to work with this is we
just need to bring in from mob x reacts
observer and then we just add the
observer decorator to our components now
that we've added that observer decorator
we can go ahead and print any values
straight here in our render method of
our components so i can go this dot
props store to dues zero let's look at
to do zero and there we go buy milk hmm
what if i want to change that remember
i'm still setting store as window store
so i can play around with that here
store to do 0 equals gets milk there we
go it automatically changed beautiful
let's change it again get cheese
change that dairy product excellent so
instantly we have this extremely simple
data layer working to where we can just
change stuff and our react UI layer will
automatically change to reflect the
changes in our state so in the next
video we're going to go ahead and build
out us really simple to-do lists with
filtering and clearing anything that's
checked it will only take a few minutes
to build out an entire to-do list