Learn Redux In One Video - Redux / React Tutorial

Learn Redux In One Video - Redux / React Tutorial

SUBTITLE'S INFO:

Language: English

Type: Robot

Number of phrases: 708

Number of words: 4689

Number of symbols: 21125

DOWNLOAD SUBTITLES:

DOWNLOAD AUDIO AND VIDEO:

SUBTITLES:

Subtitles generated by robot
00:00
hello in this video we will be covering redux here's a list of all the topics that we'll be covering in this video you can jump to a specific topic by clicking the time link in the description below we'll be moving really quickly so feel free to pause and replay if you need to so first here are the two highlights of redux first Redux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model an app without Redux may have 50 components that each have their own state and they may talk to each other
00:30
and update each other state and so the state of the act as a whole becomes extremely convoluted and confusing an app using Redux on the other hand has one place where the master state of the entire app lives and components send requests to update that master state and then state changes to the master state flow down to all of the components you can easily know the entire state of the whole app second Redux dev tools is awesome it's a browser add-on the lets you inspect the redox state easily which means you can debug your app easily
01:01
there are lots of other features in redux dev tools that helped a ton with debugging now let's talk about the store actions and reducers basically the store is where the entire state of your application lives and it's basically just one big object actions are sent or dispatched from the views which are a payload that can be read by reducers reducers read the payload from the actions and then update the store or the master state accordingly so now let's learn how to set up Redux a lot of people say that setting up Redux is
01:32
really tedious but it's actually not that bad and it's worth the effort let's start by installing create react app to give us a basic react app as our starting point to install this you'll need the latest node so go to node J esta org and download it and then let's do n px create react app Redux tutorial and then let's CD into the directory like that let's do yarn add Redux and react Redux and then we will do yarn start to start our app
02:16
you and then let's open up the project in our text editor I'm using sublime text here and then let's open up index CAS so first let's learn how to create our store let's first import create store from redux store equals create store import and Const are features of es6 syntax if you're unfamiliar with es6 syntax i'll try to explain as we go through this tutorial and when we save we'll see an
02:56
error saying that the reducer needs to be a function we need to pass a reducer in to create store so let's just create a really basic reducer function right now and we'll explain more about it later let's do function reducer and then let's just have it returned state then let's pass this reducer in to create store see that the air has gone away now we can console.log store get state to see the state of our store and since our reducer is returning the string state
03:32
that's what we see in the console next let's learn how to dispatch in action first let's create an action which is basically just an object with a type and a payload that's right const action equals and then an object and the type will be change state and the payload will be an object with new state and new state now let's send this action to list stored at dispatch and then action next let's learn how I reduce in action to update the store state
04:10
reducers have two parameters the initial state of the reducer and then the action reducers listen to every single action that is sent so they need to be able to figure out what to do differently for each action let's first just console.log the action to make sure that the action which are sent is reaching the reducer and we see in the console down here at the action that we just sent and it has the payload with the action too so to act upon the action that we just sent or dispatched we can do if action that type equals change state
04:46
then we will return the action that payload that new state as the new state then if we counsel logs at the bottom we'll see that the state has changed to be new state which means that our reduce are successfully updated the store based upon the action that it read now the state of our store is currently not practical at all it's just a single string so now let's make it look like something that we might see in the real world let's start by making the store an object with two different properties let's say products and user to do this
05:26
let's start by also importing combined reducers from redux we want to have a reducer for products and a reducer for user and we will be using combined reducers to combine them into a single reducer to pass into our store then let's delete this code down here that we don't need anymore then let's change the name of the reducer up here to be products reducer and let's say that the initial or default state is an empty array then let's delete this code up here and let's just return state for now then let's create another reducer called
06:03
user reducer and it's an issue or default state will be an empty string and it'll also take an action and let's just return state and there also for now then let's combine these two reducers into a single reducer by doing Const our reducers equals combined reducers and then let's pass in an object with products as the products reducer and user as the user reducer and then let's replace reducer down here with all reducers and now when we save we'll see that the state of our store is not products with an empty array and
06:39
user with an empty string now our store looks a lot more like a real world store in an application that is prepared to scale imagine an app that continues to grow and adds lots of pages and components each of these pages and components could have their own properties within the store to keep their state distinct from one another and yet all of their states are easy to find and see within this one master store object now let's learn how to set an initial State for the store sometimes we want to pre-populate our store with data especially if we're doing server-side rendering to pre populate
07:11
our store we simply pass in the initial State as the second argument so let's pass in an object with products as an array of one object with name iPhone and user of string Michel and now when we say we see that the state of our store is the initial state that we're passing in next let's learn how to setup and use redux dev tools first find redux dev tools in the Chrome Web Store and add it to Chrome next we want to pass in a third argument to create store which contains all of our Store enhancers so let's do some
07:48
reformatting first let's move the first two arguments to their own lines so we can differentiate them better and then let's add a third argument says window Devils extension and then window dot dev tools extension with parentheses basically we're checking to see if the browser has redox dev tools and if it does we want to call dev tools extension and pass that in as the third argument to create store now let's save and then go back to the console you may need to restart your browser to see it but you'll see that the redux dev tools extension has added
08:28
a tab at the top called Redux and if we click on it that's where the Redux dev tools are then we can click on state and we'll see the state of the store or of our application and we can inspect it by opening up the products object and we see that it has our product of named iPhone now let's update our store and see what happens let's create an action creator called update user action with type update user and payload user let's say John and then let's dispatch that action with
09:07
store dot dispatch update user and then in the user reducer let's use a switch statement which is standard practice for reducers let's do switch action that type and then the case is update user we were returned action dot payload dot user let's save and now when we click stay in Redux dev tools we'll see that the user is now John and on the left side we'll see the action that we sent which had a type of update user and if we click on the thing above update user we can basically rewind at the state of the store this is great for debugging to see
09:55
exactly how the state of our app is changing some people call this time travel debugging and it's a really powerful way to debug problems within the app next let's just do some code cleanup in the parameters of user reducer we can use es6 syntax 2d structure the action to be type and payload and then we can get rid of the action dots below then let's delete the code down here that we don't need anymore let's learn how to use provider to give our app access to the store first let's import provider from react redux
10:35
and then let's wrap the app component below with provider and then store equals store and then let's close the tag now our app can access the store and soon we'll learn how it can access the store but before we do that let's do some file reorganisation obviously if our app is going to grow we won't keep all of our reducers and actions in this one file so let's first create a folder called reducers where we'll keep all of our reducers next let's create a file called products
11:11
reducer j/s then let's copy the products reduce that Jess and pasted into the products reduce their file then let's do X for default in front of this function then let's create another file called user reducer and let's copy the user reducer from index KS and paste that into this new file and then let's also add export default at the beginning here too next in index a s let's do import products reducer from dot slash reducers
11:58
products reducer an import user reducer from dot slash reducers slash user reducer and now when we say we'll see that every still looks normal next let's create a folder named actions where all of our actions are going to live and let's just create the two files for products and use it right now even though they'll be empty for now so let's create products actions that Jas and let's create user actions that Janice now let's learn how to connect components in our app to the store to do
12:42
this let's import connect from react redux then at the bottom we can call connect and then we pass in the component after that Connect can take three arguments and we'll cover them one by one first we can pass in map state to props which basically receives the state of the store and then we can use that state to decide what props we want to provide for that component so now let's do cast map state two props above and it'll be a function with the state as its first argument this double arrow is just es6 syntax for a function and
13:24
then let's just return the state for now and now if we console.log this stop perhaps above will see that the state is logged to the council and there's a warning here saying that we need a default case for our switch statement and use a reducer so let's add in default return state here and then let's delete the return state below next let's just be a little more specific in choosing what we want from the store let's specifically return products as state dot products and user as state user the parentheses
14:08
are to automatically return this object the second argument that we can pass interconnect is map actions to props or map dispatch to props this basically allows us to dispatch actions from our components easily so we don't need to mess with using dispatch in the components themselves we can just call functions that will automatically dispatch actions to the store so up here let's do constant map actions to props equals an object now let's just create an action to use here first let's rename the user actions file to be hyphenated instead of camel
14:43
case then let's do export function update user and then new user and then we'll return type and let's make the type what constant since will also be using it in the reducer let's do export Const update user equals users and then update user the user at the beginning just scopes our action type to avoid collisions with actions and other components then let's use this constant as the type and then the payload will be user a new user
15:17
now let's write code in the user reducer to handle this action let's go to the user reducer filing to import update user from dot dot slash action slash user actions and then let's change this to be case update user return payload user now back in Epcot Jess let's import the use it in this component let's do import update user from dot slash actions slash user actions and then back in map actions to props let's put in the object on update user :
16:18
update user I'm using an update user here to prevent variable collisions if we D structure in the component then in the render above let's make a div that'll be a click event handler that will dispatch the action let's have the div say update user and then we'll do on click equals this stop on update user and then let's define the on update user method above and since we need to access this in the on update user method we need to bind it in the constructor so let's do constructor props super props
16:50
and then this stop an update user equals this town update user dot binder this then in the an update user method let's do this dot prop stop on update user and let's say Sammy and then underneath the click handler and render let's just also display this dot props user so we can see it change and now when we click on update user we see that the user Michael changes to Samy now let's turn this dip into an input so we can change the user to whatever we want
17:25
let's do input and then unchanged equals this dot on update user and then in the method it'll take an event and let's pass an event that target that value instead of Sammy and now as we update the input we see that the user in the store also updates in real time and you can see all of the actions that we're firing in the readouts dev tools below next let's learn how to use props that are passed to the component in map state to props and map actions to props let's say we're passing a prop into the app component so let's just go to app
18:05
thas and do a random prop or perhaps equals whatever to access the past and props in map state to props it's just the second argument so we can add props as a second argument and if we get rid of the automatic return and products and user as an object inside the function we can console dot log the props and we'll see that a random props whatever shows up in the console then we can use this prop to customise the props we're giving to the component if we want for
18:50
example we can return another property called user plus prop that is the user and the a random props prop together this is es6 string concatenation syntax that I'm using here now let's get rid of this console.log here and then let's console.log the props above and we'll see that our component now also has the prop we passed in and also this custom user plus prop we just created next let's learn how to access props and map actions to props this is a little trickier map
19:26
actions to props can also be a function that has dispatch as its first argument and props as its second argument then in the function will return the same object as before but this time we need to explicitly bind dispatch to the actions in here to do this we will go up and do import bind action creators from redux then back in map actions to props we'll wrap the object in bind action creators and then the second argument will be dispatch let's save and we see that everything still works
20:21
and now we can counsel vlog see that we are indeed getting the a random props prop in here correctly and let's get rid of the console.log in the render to be able to see it more clearly and like above we can use the passed in props to customize the action creators that we are making here next let's learn about the third argument that we can pass into connect which is merge props so let's do cast merge perhaps equals and then merge perhaps takes three arguments props from state which is basically whatever we return from map state two props props from dispatch
20:54
which is what we return from map actions two props and own props which are the passed in props and let's just return an empty object for now even though this would mess up our component since the result of merge props is what the component will receive let's console.log these three things outs so props from state props from dispatch and own props and we need a double arrow here and we'll see that we get these three objects in the console property from state here props from dispatch here and own props here
21:34
next let's learn how to do API requests with redux thunk middleware first let's go to the terminal and do yarn add Redux thunk and jQuery now we want to add the redux thunk middleware to the third argument which is basically our store enhancers to do this let's add apply middleware and compose to our imports above and unless do Const all store enhancers equals compose and then let's first put in our Redux dev tools code so let's copy that from below and then replace the third argument with all store enhancers and
22:10
then let's paste the dev tools code up here and that's refresh to make sure that nothing was broken and we see that the redux dev tools and the browser still works now let's add the thunk middleware to our store enhancers so let's do import thunk from redux thunk and then in the compose function let's add apply middleware thunk as the first argument I'm not sure exactly why but the thunk middleware needs to come first or else it won't work now let's do a little bit of code cleanup let's delete the merge props here
22:44
let's change the map actions to props back into a simple object by deleting this code here and here then do we merge props down here and now when the user reducer we're going to add an action creator that doesn't return an object but rather a function we can return a function now because the func middleware will handle it so let's first import dollar sign from jQuery to make our API request we can use whatever we want here I'm just using jQuery to keep things simple then let's do export function API request
23:21
and it will return a function with dispatch as an argument and inside of this function will do our API request so let's do jQuery AJAX we'll just choose a random URL here since we don't have the server let's say Google com and then we'll have a success method that counsel dogs success and an air method that console logs air and because of course or across origin restrictions we're going to get an error here but that's okay now back in Appalachia let's add the API request
24:00
action creator to our imports and then a map actions to perhaps let's add on API request API request then let's do component did mount then this dot props dot on API request and now when we save will see that the air is logged to the council because our API request produced an error but the important thing is that our API request was sent by the thunk middleware now back in the user actions file we can dispatch additional actions in response to the API request so let's create another action up here let's do export
24:44
functions show air an inside of show air it will return a type let's say show air payload and let's define the type above as Co air equals users show air then in the air method below let's do dispatch show air so basically when an error happens this show air action will be dispatched then in the user reducer file let's handle this action by adding a case and let's import the show error constant above so case show air
25:40
and it will return payload let's actually change the payload and user actions to be an object with user error so then payload user here and we actually need to call the show error function here in the air method and now if we were we'll see that the user changes from Michael to err it happened really quickly so let's slow things down a little bit to be able to see it more clearly in a plot Jess let's add a set timeout around the on API request call let's put that code inside of the set timeout and let's just say we want to wait fifteen
26:20
hundred milliseconds before we do that call now when we refresh we see that the user is Michael and then it changes to error now if we wanted to make our response to the API requests more robust we could put another dispatch in the success method to respond to whatever we get back from that API request so we would do something like dispatch update user and then pass in a response dot new user here obviously this won't work right now but this is just an example we could also dispatch an action right when the API request is made let's just call
26:52
request made as an example and we could change the types of these actions to be more explicit so the show arrow type could be something like API request error and the update user type could be something like pío requests success and then if we had an action called on request type of that action creator could be something like request requests you can customize these actions to be exactly what you want them to be now let's learn about reselect which is a selector library for redux
27:37
below here are three great reasons to use three select first selectors can compute the arrived data allowing Redux to store the minimal possible state selectors allow us to keep our store as minimal and clean as possible second selectors are efficient a selector is not recomputed unless one of its arguments changes so for maximum speed and performance we should use selectors and finally selectors are composable they can be used as input to other selectors so selectors are extremely customizable now let's install
28:07
reselect by doing yarn and reselect then back in Aptos let's do import kriya selector from reselect then let's replace the map state to perhaps part with create selector and each argument here is basically a function that gets passed the state so for the first two arguments let's do state and then let's return state dot products and then state and then let's return state user then the last argument will be a function that receives the result of all of the previous arguments so let's do products user and then we'll just return an object with products and
28:50
users again this is es6 syntax and these should actually be user not users and when we go back to the app we see that nothing has broken and let's just get rid of this API request code here for now now we read earlier that selectors are composable so let's try that out it's good to create smaller sub selectors to maximize the speed and performance of selectors because if these smaller selectors don't change then they are not recomputed so let's do cast product selector equals create selector
29:23
and then the first argument will be state and then state dot products be products and then we return products let's copy the selector below and let's change the product to be user here and then let's replaced State and state dot products with just product selector in state state I user with user selector and this product up here should actually be user and now when we save we see that everything still shows up correctly as expected next let's talk about smart and dumb components in an
30:06
app that uses Redux you don't want every component to connect directly to the store that would be overkill instead for each major page or section of an app we usually have a top level smart component that connects to the store and then each of the sub components that live under this top level smart component will be dumb components I simply receive all the props they need from the top level smart component so the top level smart component will pass down all the state and all the action creators that the Dom sub components need this way we keep things clean by having fewer components
30:37
connected directly to the store and everything just flows down from the one top level smart component to the many dumb sub components below for example let's take a look at an example products page and let's say that we have a top level component called products page and there are sub components inside the products page component called add product and products list we would connect only the products page to the store and the products page we'll get the products list from the store as well as the action creators called fetch products and on add product the products
31:08
page component will pass the products list to the products list sub component and the on add product action creator to the add product sub component and the products page component will be the one that calls fetch products in a Redux app we want to try to minimize the number of smart components that we have so we know which one place to go to find all of the logic for getting the state and the actions and that's all for this video hopefully you found it helpful I'll see you next time

DOWNLOAD SUBTITLES: