Connecting React & Redux - Redux Tutorial #7

Key Takeaways

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 JS 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 store JS 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 a 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 combine 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 usern 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 it 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 it returns if it's an object describing a function in this case fetch user just replies hey fetch user fulfilled I didn't even do an Ajax thing I kind of faked it in right here um or over here for tweets actions I'm actually loading tweets from a restful API and I'm reach turning 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 uh 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 the user actions so then I can dispatch something like user fetch user I can dispatch it like that um or I can also dispatch user. set username 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 username from user actions and then I can uh actually set username is that that B There we go so then 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 runev get my Watcher 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 uh react redux's provider so let's go ahead and import 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 store because after all it's the react Redux provider so let's go and import our store there's our store and we just call it store okay 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 let's 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 webpack 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 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 uh so it's a 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 it's going to run function a and function B 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 Fu equals 1 now this. props do Fu 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. props do user and I have the user set from the value of the store uh which is really really nice but if you'll check out my user reducer I'm actually user. user is the user and then I have user. fetching user. fetched user. error so let's say I just want this user. user value now this doprs do user is actually the user itself so I can console log this. props let's see what happens on reload there we go this. 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 could 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 we'll 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 never doing any of that so let's just go ahead and call that real quick component will Mount we're going to go ahead and dispatch something we're going to dispatch uh 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 and 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 username name Will age 35 so let's go ahead and just print that username 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 ah and actually do an asynchronous action on my tweets actions I'm actually using axios to make a for real xhr request 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 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 aad and 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 length at all we're going to return a button instead that fetches the tweets for us let's go click on this tweets are fetched and we're moving on with the actual render of the page so now that we fetched those tweets we can actually map them to I don't know say lis let's do that a UL let's put we'll put all our Tweets in here so let's go Ahad and map those tweets map 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 ha 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 application it's really really simple every component pulls in just what pieces of the store you want because as you guys know you tend to want to use Redux when you have a really big um 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 and 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 there's kind of two trains of thought here is you have smart components and dumb components uh 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 uh 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 doprs do Dispatch they simply receive something like a fetch user prop and that fetch user prop will fetch all the the users and so it's kind of this toss up you want to have as few smart components as possible but you also want to avoid passing props 10 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 um however also the the more you pass props the harder it is to unit test your react components so that's something to be aware of the Dumber a component is the easier it is to unit test that component so you want to keep as as little uh 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