Basic Redux Introduction - Redux Tutorial #3 Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

in this video we're going to start
coding in redux now Redux is extremely
extremely simple what gets complicated
about Redux is when you start looking at
all the pieces moving in say an example
that you find on github some example
code somewhere
it actually looks very very complicated
because it's hard to figure out what is
actually making the thing work so we're
going to start with really simple
examples you're going to see the
beautiful simplicity of Redux and then
we'll build out all the extra pieces to
that full working example and you'll
understand how everything works so I am
in the source code repo that I have on
github I'll put the link in the
description and I'm in the for Redux
folder which at this point is a
copy-paste of the one basic react folder
it's just a simple welcome and you can
kind of change that title to whatever
you want hello world so now let's go
ahead and just install Redux which I've
already done so this will just kind of
flip by quickly or it will do it all
over again and now we can run npm run
dev which will give us that dev server
on localhost 8080 okay so I'm just going
to open this client j/s and we're going
to scrap it all we're not going to use
this application at all I'm actually
just going to use the developer tools
because we're just going to console.log
we're not going to use react at all
because redux is not actually a part of
react or a plug-in to react redux is its
own way of managing application State
you can use it on any application it
just happens to work awesome with reacts
because react is very functional and
we'll see why that is in a little bit so
we just have to import one thing to get
rolling and that's create store from
redux
there you go create stores imported and
to start up a Redux store you really
just need one thing you need a reducer
so let's just make a function right now
unction
there we go so we have a reducer
function we'll fill that in a minute and
now we can create our store create store
and then all you need to do is pass it
that reducer and then you give it any
kind of initial state so we can just say
the initial state is 0 we'll just make
this do an increment for now so our
initial state is not an object I mean
normally that would be an object that
has all the values of your actual
application state but for now we'll keep
it really simple and just make it an
integer so there we go that's our Redux
bootstrapping process you need a reducer
you need a store and now we can listen
to this store so we can subscribe and
I'll just make a little function here so
when anything changes to the store we
can console.log hey store changed and
then we can console.log the stores
current state there we go so when
anything changes on the store we're just
going to drop a little console log there
and you see if I go ahead and say there
I don't have any logs at all and then I
can actually dispatch events to that
store as well so store dispatch let's
say our type will be increment and
payload I will increment it by 1 there
we go it lets it save you can see that
the store changed and there's really no
state nothing happened the state is
undefined that's because it ran through
the reducer and the reducer receives two
things it receives the state and then it
also receives an action and then
whatever returns is the new state for
the store so in this case we return to
undefined so nothing happen if we return
Foo then the state will always be food
no matter what action happens there you
go store changed and the value is Foo so
the reducer basically gets to change
that state we make changes to this state
based off of what the action tells us to
do so to make this really simple we can
just go if action dot type equals Inc
well then we're just going to do
something state
equals state plus one and that will
actually just return state plus one
otherwise let's just return state so now
we go store changed and the values one
let's do a few more increments here and
you'll see store change one two three
four awesome now we can add a decrement
decrement there we go and then we could
do this exact same thing if action type
equals Dec let's return state minus one
so you go one two three four 3 and that
is Redux in a nutshell
now obviously you don't want your state
to be just this and we can actually do
some more with this action let's say we
want to increment this payload by one
and let's increment it by two and then
it's coming on by 22 let's stink our
minute by a thousand then we can
actually do state plus action dot
payload and state minus action dot
payload that way we're actually using
that payload there we go so it goes from
1 2 3 to 25 26 negative 974 it's
completely unacceptable and so I'm
calling the command now an action
command and that's not going to work so
the action does have to have a type
value given to it now I could change
payload to be anything else this could
be value and that's still going to work
or I could call it a number and that's
going to work so you can completely
change the other values in here you can
pass two or three values in but as a
standard you want to call it payload and
if you have more than one value to pass
into a payload then you just pass in an
object instead of just a single value
say a payload might have four or five
different pieces of information to it
then you still probably just want to
pass in a payload and give it an object
that's a standard way of doing things so
there
go that's Redux you create a reducer you
create a store and then whenever you
dispatch events the reducer or multiple
reducers act upon that store so let's go
ahead and take this thing a step further
and let's combine multiple reducers into
one so we can actually break these up
into files that make sense