MobX tutorial #2 - Computed Values and Nested/Referenced Observables Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

in this video we're going to take a
deeper dive into mob X and how you
actually use mob X in a real application
by building out this - duze application
so let's start by actually printing
these two do's out we have this to do
store again that's giving us two really
basic to do is all they are is strings
at this point so let's go ahead and make
a ul with lis for that we won't really
mess with CSS but we'll get it going for
this example with a ul and allies then
I'm going to go ahead and pull those two
dues out of my props I'm going to go and
map those two el eyes
so there we are our two dues are now
showing up so let's go ahead and get
this filter going one great feature of
mob X is we can actually real-time react
to computed values so if we were to
filter this list by whatever this value
is that would be a computed value and
that's extremely easy to do in mob X
let's start by getting the input going
to actually real time set this filter
for us let's go ahead print that filter
here we'll pull it in now let's go get
an input that will real-time set that
filter for us there we go so on change
we're going to fire this filter select
set that up and this will be extremely
simple and there we have it so now we're
going to have a ul and we're
automatically going to be able to change
that and that will set the filter you
can see there we go our filter is
setting let's go to wrap this and maybe
a div just to clean up a little bit for
now there we go so you can see that our
filter is automatically setting so let's
go ahead set a computed value now and to
do that we simply import computed from
mob X computed then we'll fire very
lazily whenever it's needed to fire so
let's go ahead and make an observable or
a computed value and this is a get
filtered to dues so whenever our data
changes filtered to dues we'll go ahead
and compute a new value and we can just
kind of basically check the filter and
filter out all the to dues so I'm going
to do a case insensitive check if it
matches loosely our filter then let's go
ahead filter them out so let's go to
filter the two dues now let's say if
there is no filter at all so if there's
no filter then we're going to say that
that's okay we have not set a filter yet
or if it matches the filter
so there we go
if no filter is set or if it matches the
filter then our results will show so
let's go ahead say that and now we're to
do list we'll get an additional value
called filtered to dues which is
essentially to this react component no
different than the to do is array itself
so I can simply print out the filter to
dues instead there you go that's
reloaded and let's see if it works
yep if I do M it works if I do CH it
filters out so now our two dues are
filtering let's go ahead now and clear
out this filter which we no longer need
to see and in its place let's add an
input that will allow us to create a new
to do so we are going to do create new
and let's set our create new up here and
all we have to do is filter out we only
want to create if key press 13 which is
enter has been pressed so if and let's
clear out our value once we create it to
do so now we're calling the create to do
method on our mob X store let's go and
add that create to-do method there we go
now we have a second input on the page
and let's see if we add new to-do to the
list when we hit key press 13 yes it
does excellent so now we have an input
that's real-time adding stuff to our
list and we have a filter let's only
view the tests that's only view milk
excellent that is working as well so now
let's go ahead and add maybe some
checkboxes and a little bit more value
to the to-do store and this will get
into the concept of nested stores or
nested observable objects from Bob X so
for two dues we have the to do store but
we want to make this an array of
observable to do objects that have more
than just a text string they need to
have a state whether they're checked or
not and they also probably need to have
an ID so
to do this we're going to actually
create a to do type so let's go ahead
and create a class of to do this could
be done in another file but to keep
things simple I'm just going to add it
right here and it's going to have some
observable values on its own so let's
make an observable value ID and complete
and then a constructor for it
and then real time we'll go ahead and
create an ID which will just use date
now to kind of simulate an ID that way
it'll get a timestamp for an ID that way
it'll be unique and it'll automatically
be false
by default so then all we have to do is
instead of pushing a value we can just
push a new to do with a value and we'll
just clear out this to do is list now
and now let's see what happens and now
it'll work or the store portion will
work you can see that if I add tests in
test one they're not showing up because
I'm adding them to the store but now the
store is inheriting an array of objects
so to map these out to an Li I simply
need to do to do dot value and they will
all work just fine now test test1 test2
test3 well also at this point want to
add a key to our to Do's li so there's a
unique key for each one react to need
this I probably have a react warning yep
you can see I have a warning here each
child needs a unique key prop so let's
go to add that key and that's where our
to-do ID will come in handy since the ID
will never change excellent that warning
is gone well let's make sure it's gone
yep that warning is gone and let's go
ahead and add a check box why don't we
and let's go ahead set the value to to
do complete now let's also set checked
to to do complete so there we go now any
new to do should automatically reflect
the state of its object up here of its
observable objects so let's go ahead and
test this out okay it looks like it's
doing good to verify this let's make the
default to be true so now all of our new
to Do's should automatically be checked
okay very cool that's working so now
let's go ahead and set a change method
to automatically change that and kind of
as a little hacky quick way I'm going to
bind it to this and I'm also going to
pass to do as the first argument in
there so the first argument will be to
do here so toggle complete will get the
to do of whatever was clicked now if you
don't like this way of doing it you
could also just totally pass in the ID
or you could even print the ID here on
the input element but it's my opinion
just as simple and it's not going to
cause any problems to pass it in this
way so let's go to do dot complete
equals the opposite of its complete
status now it's important to note here
that if you don't like the coupling of
the to-do list right here to the to-do
store you can see that I'm manually
changing the to do right here what I
could definitely do is do something
that's more along the lines of actions
with mob X whereas instead of changing
the complete item within this component
I could fire off a to do complete or a
to do toggle complete action pass off
the ID in something else outside of this
module outside of this react component
could handle that action and update the
store as a third-party action so you can
still definitely do flux tile actions in
mob X if you like that abstraction but
for something that's not as complex as
what we're dealing with here
or for something that's as simple as
we're dealing with it really doesn't
need to
that level of abstraction so let's test
this out and can we change it yes we can
so let's go change this to be false now
and let's add one more feature now that
we can complete some items let's make a
little button to clear those completed
items and let's say clear completes and
so we're just going to basically fire
this dot props dot store clear complete
of course I can actually clear that out
a little bit and just import clear
complete which doesn't exist let's go
ahead and create that now and I'm going
to automatically bind it using an arrow
function so that way it is bound to this
it will always fire within correct
context and I can't really change this
dot to dues one of the differences one
of the big differences between
observable arrays and plain arrays they
act almost the same in every way except
for I can't erase it I can't just point
to a new object because then the
reference is actually messed up we have
lost all our reactivity at that point so
what they do is they give you a replace
method so I can call to do is replace
which can now replace it with a new set
of two dues so I can go ahead create the
new complete or incomplete set of two
dues
so if the Jews are not complete they're
going to end up in this array and I can
replace it right here so let's go ahead
and test this out now we can go tests
test one tests two and if I hit clear
complete nothing happens and let's check
if you guys complete and the other two
go away about the only thing I need to
do now is my filtering is I assume to be
broken yes everything breaks because if
you remember Mike to do is not a simple
string now it's got a value so to do dot
value I'll need update that my filtering
should be working again have a say - yep
now we're good and there you have it
we've added quite a few features in a
matter of minutes
to our to-do list it was extremely easy
to do ma Bex made it really really fun
and look at how little code we have what
is this we have 35 lines of code in our
components and we have somewhere around
30 lines of code between our to do class
and our to do store class this is the
joy of mob X you simply get a lot of
work done for the amount of time you put
into it hope you enjoyed these lessons
have a great day