create-react-app, React with redux-connected counter component

in the last video we set up react in this video we're going to look at setting up reacts and how a basic redox flow works discussing middleware reducers and stores so in this case we are going to sidestep the boilerplate and setting things up with Bebel and web pack that we did in the last video and we are going to instead it's all Facebook's scaffolding tool called create reactor this is going to produce a much more feature full weather plate application which is going to include much more complicated production and development web pack configuration scripts as I discussed in the first video when building our bare-bones one so now we can do is after installing that globally assuming you have noted an NPM installed go say called react thing let's take a moment especially in the first try career react top that's customizable and when you're finished using their basic scripts you're able to eject and make your own changes and close their dependencies so one substantial feature that is unavailable in our basic web pack build even with the web pack watch feature is that create react map includes a development build server that will allow us to stream changes in both code and style sheets to the browser live oops so we're going to start that dev server now and we'll see the stock page that's included it's basic components will CSS animation rotating that will go SVG there we go so right off the bat we've got a few things here's serviceworker it's unnecessary for now so who's that little girl owes unnecessary there we go excellent we get live updated errors indicating what we've done wrong in this case we've deleted something I'm not the reference so we could start to remove that here that they're slick in our world example we'll back to that state remove this test on best practice but we're just trying to get something running with redux quickly as we can here already I'm a fan of four spaces but two spaces is very common in the JavaScript world semicolons are unnecessary but customary react allows us to write these components in one of two ways first they have this traditional class ESX way where we can represent the component as being a series of hooks or a lifecycle hooks which allow us to render or receive the props or components creation do a certain thing or on its unmounting do a certain thing and simply by implementing the class procedures like component will receive props we'll be able to look and see something's changing with component therefore we should take this of that action or do something in the teacher and then re render by force alternatively we can also declare an app simply as a function something like this we can just read there in JSX so we'll say something like this and that works just as well interestingly with react and particularly because we're using this build server we are going to find that it is very easy to do something like create a stylesheet and set a background color here and just invert the colors for now and we will import that and what's going to happen here is that it is going to again multiple peers nothing going on what's happened is in the same way that we set up a bell loader and our webpack example in the first video create react app is included a series of letters for styles.css to allow those things to be imported into the bundle and then dynamically injected into the live application and because the hot patching in the development server is particularly sensitive to context it's able to note things like only the style has changed and plus to hydrate those changes to the client allow us to see something like the style change without actually having to refresh the page now if I go and having brought that into the bundle and say I make a change here like we'll make this somewhat grayer notice that there was no refresh at all CSS just injected itself and was updated take a peek at the websocket what's happening it looks like it's past the error message end but it's still done an update for us let's get Redux in and see what happens next Redux is the core library that's going to allow us to do state management and what I mean by that is traditionally when we're building an application we've got the view the model and controller and here with react we've clearly got just the not a complete picture we've got only the view so we're going to need to find a way to supplement react now of course we could take advantage of those lifecycle hooks or constructors in the class and we could build ourselves something that has side effects and state inside of the component and that is a certainly the way to approach some limited problems where the scope the state is not going to be much larger than maybe a variable or two or you're going to be relying on some particular may be messy other piece of inline HTML or scriptlet that you've included but in this case what we're going to try and do is progressively build up on redux as being a coherent and singular way to address both input output effects that we want to do but kind of the app level and also to make sure that when we make a state change every single sub module is going to be correctly updated every single component is going to receive the correct bits of state and only when those bits of state are updated so we've got an efficient way excuse me an efficient way to hydrate the state from server to client so we are going to first build a simple example and we're going to import create store from redux which is one of those functions that you can't get away from oops not going to do it here in app we're going to do it and make called the entry point here again when they can main function and like our first example what queue that's on an event so once everything is loaded we get this main called remove even closely it will move our render inside of here after everything is all set up I'm going to do first is create a constant variable called score which will be the result of our support crate store takes as a argument a reducer function reducer function is a key concept and Redux and a Redux being again the state management state container library created by Dan Abramoff excellent library the documentation is thorough he's created a series of videos on egghead IO that thoroughly document how to do exactly these things in much more detail and he discusses from the ground up how to build your own take on the library once you have used redux a few times it's really natural to find yourself recreating those same patterns when you go and do something even get a simple in JavaScript and so there's been a bit of controversy on Hacker News and echo Jas and other sites that seems to knee-jerk in response to that and you'll see kind of hit pieces that crap on redux or say you know developer need to you this although there is some truth to the fact that it's being widely overused even for simple projects that being said when the project's grows beyond a certain point it's nice to have this common API and to think about actions in a way as simple as Redux does with its flux standard actions so let's again look at whatever juicer is the function that takes a state an action a return state so we've got here is an 8 action state and the idea is that this state is going to initially be something and it could be anything the type is not forced on us so if we say it's initially zero then okay maybe we're dealing with a counter component so that's what we'll say for our first example of Redux is we're going to build a few action types here and we'll look at that without getting into too much detail as Redux provides a calm excuse me a thorough API for dealing with actions action creators dispatching actions didn't with stores applying middleware to stores middle word hang functions which allow you to kind of intercept and chain functions and recreate functions which exist as applied to the store in order to allow you to inject your own IO boundary and create whatever extra functionality you need to add to the store it's kind of like if you're ever adding new functionality chances are you're creating a little work we will take as action types to possible strings and chromatic remit which will respectively make changes on this count so knowing the interstate is initially zero we're going to write our functions as such and then should any other action come through the stack we want to be absolutely sure that we're I mean either way the falter case here is to return the state but the notion is that we'll continue throughout actions as our application grows and complexity in size however this reducer even if it were to be moved into some sub reducer later on and application development we will find that it's still harmless it's going to do in sting with state here and perform and respond to these actions and only these actions so now we've got the basis of a Redux application but we're not connected to anything to do with react so first let's make sure that this is working will dispatch a few actions to the store and we can do that as simply at this say this is not best practice with redux but we're going to have to snatch a few increments and it can also retrieve the store by using the function get state as such okay all right so that looks correct they think remitted three times betrayed the state and it is three so how are we going to wire that data into react so that it is in some way subscribed to the react render function that when value changes or when our state changes the app will be rendered how do we cleanly do that as per convention well react Redux the other companion library to react and redux that we installed provides a higher order function called connect which allows us to find functions together and produce react connected elements excuse me Redux connected react elements and it also includes a provider element which will receive as a parameter or prop like an attribute in HTML a store Redux so now we've got this provider and it's our actual parent because it's overseeing state the authority on state and our application now what we're going to be able to do then is that's what we're going to do here we went to the app we're going to import the connect function here because in order to access this we want to connect the redux connect we can we're going to map state to props is the function that we have to provide to connect in order to retrieve the current state and return it as a property to the component that we're rendering so in this case we're going to create a function called map state to crops and it receives an object that contains state in this case it will just be the state and so we will say we could just return the counter I'll be could just return state and the property will be represented as a number in this case we're going to break it apart and assign the key value pair value to state this object and now we're going to use a decorator and compose these functions together does it not want to use the character okay if you can't use the decorator syntax which is experimental and subject to be removed anyway then you can also see your composition like this those are nowhere that I couldn't do that with AK react to create react tap default okay so now create react app or sorry connect is performing those we're exporting a bound version of the app component which should do to our connect function in our mapping function receive the state and now here in the app which receives an object props and as of es 2015 one of the things that we can do is object D structuring so instead of writing props here where we would have to go do something like where to go because of the objective structuring or we could write it even shorter and go nice and clean so now let's add our count here into the string and we'll just say okay so now we're displaying the values in the store but how do we affect it clearly we don't just want to be able to view things we want to be able to change them and alter value and affect things to happen in state otherwise this is just sort of a really complicated way to display variables so in order to do that we're going to want to be able to omit these actions same way I did here for our example but we're going to want to be able to do that from within the react component that we've connected so default zero now divider and button we're going to do is connect can take a second argument or you define another function to map a dispatch to a series of probes and dispatch is a function which has been bound in the context of the store already by the provider so when we write that mapper function dispatch to crops we receive again the dispatch and we return an object which is going to be the props that will be rolled into the app's props so here we're going to say increment we're going to define a function that because dispatch is connected to the store and we've already written the reducer function we know what the reducers excuse me the action types are we're going to write increment like that and we're going to write that comment like that and now in the same way that we received in our properties this those objects will have been folded together and we'll be able to in the same way receive those from our objective structuring and so we can assign those events by providing cold X in the context of our HTML which will work will be wired up and we're just kind of not worried about that art at all like no matter we're going to simply dispatch those sections let me click the button let's make sure that works all right so so far that's the basics of react and redux and also using create react app to sidestep all the boilerplate setup

Channel: James Skarzinskas

Views: 1,078

Rating: 5 out of 5

Keywords: toobs, development, react, redux, create-react-app

Id: miIVGMH-qyA

Length: 21min 19sec (1279 seconds)

Published: Sun Sep 24 2017