Connecting React & Redux - Redux Tutorial #7 Video Lecture | Learn and master: Flux - Game Development

at this point we're pretty much ready to
tie in redux to our react application
and it's going to be really simple to do
first of all let me show you how I've
gone ahead and broken up my redux code
here's my client chase and currently
there's nothing Redux happening in this
it's simply importing react and
rendering my layout components my layout
components is returning null it's not
doing anything so I have an empty web
page let's go look at a storage AS this
is where all of the Redux logic is
living and it should look completely
familiar I'm exporting a create store an
instantiated store so anyone who imports
store requires store basically gets that
same instantiated store every time and
that of course is firing our one reducer
which is all of our combined reducers
and it's also giving it some middleware
which is adding promise thunk and logger
so that should look completely familiar
to you at this point let's go look at
how I broke out those reducers again
we're importing reducer from reducers so
that's going to import this index.js
file all I'm doing here is doing that
familiar combined reducers command so
I'm importing the tweets reducer the
user reducer and I'm combining the two
and that's what I'm exporting and the
tweets reducer and the user reducers are
just a giant switch statement exactly as
you've seen before so it's completely
simple I'm defining my default state up
here using es6 default arguments and
everything else is just a switch
statement making sure that I don't
mutate any values always return brand
new objects and it's all going to work
just fine now as far as actions are
concerned I've gone ahead and I've made
a few sets of actions here now Redux
isn't really opinionated on how you fire
actions what the format of those is you
just make sure every action has a type
right so I like to do it by exporting a
different function for each action here
you have my export function fetch user
export function set user name and the
reason I like to do it like this is I
always know in my react application I'm
going to fire a function and whatever
returns is what I'm actually dispatching
this gives me a lot of freedom and
continuity on the react side of things I
know I'm just going to dispatch this
fetch user function and whatever returns
if it's an
object describing a function in this
case fetch user just replies hey fetch
user fulfilled I didn't mean do an Ajax
thing I kind of faked it in right here
or over here for tweets actions I'm
actually loading tweets from a restful
api and I'm returning a thunk
so I'm dispatching thunk middleware here
it doesn't really matter on the user
side whenever I change fetch user to a
real Ajax action the react side doesn't
care it's still going to execute a
function and return whatever I'm
returning so that's kind of why I like
to go with this export a function for
each action type of syntax and also you
can import them in a couple different
ways on the react side of things I can
import star as user from some path and
then user actions so let's just say it's
in the same folder so then in my say I'm
in a component right here I'm importing
all of these reactions so then I can
dispatch something like user fetch user
I can dispatch it like that or I can
also dispatch user dot set user name to
be will so that's kind of how I would
use those or if you just have to use one
action in a component you can just
import that one import fetch user name
from user actions and then I can
actually set user name is that be there
we go
so that I can dispatch that somewhere
else it gives you several options on how
you want to do it from the react side of
things so that's how I like to set up my
action files export a function for each
action so now let's get into the actual
tie-in portion and the tie-in is going
to be really simple because we're going
to use react redux for that let's go
ahead cancel this and install react
redux
there we go the react Redux module is
installed go back to NPM run dev get my
watch your going and so there's two
steps to actually tying this in the
first step is you want to wrap your top
level component with react Redux is
provider so let's go ahead and port that
so my provider is pulled in and if this
is your router for using react router
basically whatever you would normally be
rendering you render the provider
instead simple enough and I'm just going
to inject my store into the provider the
provider requires and expects you to
give it a storms after all it's the
react Redux provider so let's go and
import our store there's our store we
just call it store ok so now our
application is tied into redux any
component anywhere down the chain can
import data from the Redux store and can
also dispatch store actions so let's go
do an importing portion of that let's go
to our component our layout component
that is returning null and for this
we're going to import the connect
portion of react Redux and I have a
semicolon there make sure we stay
consistent and I can actually use it
right here that is assuming that you're
actually transpiling with es6 I'll show
you my package JSON I'm transforming
decorators right here and in my web pack
config I'm importing that package and
then webpack config is transforming
decorators so assuming your transpiling
decorators decorators are a great way to
wrap a component so basically connect is
going to wrap it when you load the
layout component you're actually going
to get the connect component which
renders the layout component and injects
props into it so it's really really
simple way to inject props into layout
and not mess with your layout component
at all
so the connect is going to run two
functions is going to run function
and function B but not V a and B they're
going to do two different things
function a is for getting store values
in as props so it gives you a store and
then it expects you to return an object
and whatever you return gets set as
props so if I were to say hey return foo
equals one
now this stop prop stop foo would equal
one down in my layout component so
whatever you return gets mapped as props
what's great about that is it allows me
to slice off portions of the store let's
say I want to grab user store user now I
can go this top props user and I have
the user set from the value of the store
which is really really nice but if
you'll check out my user reducer I'm
actually user dot user is the user and
then I've user dot fetching user dot
fetched user dot err so let's say I just
want this user dot user value now this
step props dot user is actually the user
itself so I can console.log this stop
props let's see what happens on reload
there we go this uh props is now user is
set and also dispatch is set for me
excellent so I can make some actions I
can dispatch some actions so I could get
user there and I can do fetched or I
could call it user fetched and now on
reload you can see I've got user fetched
false and user is an object full of
default values excellent so that's kind
of how you'll pull props in let's do one
more thing let's pull in tweets so
tweets is now pulled in tweets will just
be an empty array for now because
there's nothing yep there we go tweets
an empty array will do something with
that in just a moment and let's say that
we actually want to fetch the user now
if you remember on my user actions here
this is synchronous I'm kind of faking
in that the user is fulfilled I'm
passing in a payload right away it's
never calling Ajax and never doing any
of that so let's just go ahead and call
that real quick component will mounts
we're going to go ahead and dispatch
something we're going to dispatch we
need to pull in an action don't we let's
go ahead and pull in one of those
actions like I showed before I believe
that action is called fetch user yeah
fetch user there we go so let's go to
import fetch user from user actions and
then I can just dispatch fetch user
there we are and now that user will
fetch and second time around I've got a
user name name we'll age thirty five so
let's go and just print that user name
out so we feel successful in life
excellent that simulates that we've
loaded something from the back end and
we're now printing it out let's go ahead
and actually do in asynchronous action
on my tweets actions I'm actually using
Axios to make up for real xhr requests
to rest learn code Academy and get some
tweets so let's go ahead and dispatch
that action but let's take this up a
notch let's say that if tweets are not
loaded we want to give us a button that
can actually load those tweets so let's
go ahead and clean this up a little bit
let's grab those and clean that up there
if there's no tweets length let's return
a button instead
and that button will on click will fetch
us some tweets let's go ahead add that
fetch tweets handler same thing this is
just going to dispatch a fetch tweets
action let's go ahead pull in that fetch
tweets action up here okay there we go
so if there's no tweets linked at all
we're going to return a button instead
that fetches the tweets for us let's go
and click on this tweets are fetched and
we're moving on with the actual render
of the page so now that we've fetched
those tweets we can actually map them to
I don't know say L eyes let's do that
AUL let's put we'll put all our tweets
in here so let's go ahead and map those
tweets
tweets
so there you go for every tweet we have
in our array we're going to spit out an
Li with a tweet content map it here
there we are so we have no tweets let's
load them up boom
we have tweet text of course because I
forgot the curly braces haha let's print
that out some of you guys were probably
yelling at your screen stop
you forgot the curly braces load them up
this time and boom we have teenager
tweets so there you have it that's kind
of how you're going to tie in your Redux
store to your react to application it's
really really simple every component
pulls in just what pieces of the story
you want because as you guys know you
tend to want to use Redux when you have
a really big or more complicated data so
each component just pulls in what it
needs I just care about the user and the
tweets I don't care about all the rest
of the store it could have a bajillion
pieces of data in it I don't care just
give me the tweets and just give me two
actions here I don't care if we have
5,000 actions going on this thing is
going to scale really really well give
me two actions I'll dispatch those two
actions and I don't care what happens
after I dispatch them whenever my pieces
of the store are updated I'm going to go
ahead and rerender that's kind of now
hopefully you're able to see a lot of
the beauty of Redux is it really at the
component level keeps things extremely
simple so let's talk about maybe to wrap
this up how much and when and where do I
actually want to use this Connect that's
a big question with Redux just kind of
two trains of thought here is you have
smart components and dumb components the
smart components use connect and then
they pass everything down as props to
all the dumb components the dumb
components are not aware of Redux at all
they just get their stuff from connect
and then they'll also usually even pass
down as props dispatch actions so those
components are so dumb they're not even
aware of this dumb props dispatch they
simply receive something like a fetch
user prop and that fetch user prop will
fetch all the users and so it's kind of
this toss up you want to have as few
smart components as possible but you
also
to avoid passing props ten levels down
just so they can get used that's kind of
an anti-pattern as well in my experience
I'd rather have more smart components
and less prop passing because it's just
frustrating to pass props pass props
pass props however also the the more you
pass props the harder it is to unit test
your react component so that's something
to be aware of the dummer a component is
the easier it is to unit test that
component so you want to keep as little
Redux tie in as possible going on with
your components while making sure you're
not miserable as a developer passing
props all over the place that's kind of
my two cents on that hope you enjoyed
this slightly longer than normal video
on how to tie Redux in with react