React Architecture Working with Flux and Redux FULL COURSE || Redux and Flux in react js Tutorial

hi I'm Annie Henry or you can call me Emmanuel Henry and in this course we'll introduce three Ducks Redux is a state management tool to allow you to have an application be predictable and also allow you to better test your application and it's not for everybody so Redux has a lot of boil plate that heads to your application and also makes your application a little bit more complex than it needs to be so if you're building a small application Redux is not necessarily for you even the author of Redux said that so if you're building however a big application or something that you want to scale State Management with redox or other tools like Redux is really something that you should explore and in this course we'll explore the concepts of redox how does it work what is a store what is a reducer what is actions what are actions and all the concepts around Redux okay so what do we need with Redux if you've done the previous course react from scratch then you should have a solid editor and you should have the react Dev tools installed so if you don't have the reactive tools install you can search for reactive tools on Google and hit the first link here so react developer tools and install it on Chrome and I already have it and if you do command option I and look in the tabs and you need to be on a react website or a website built with reacts such as Netflix for example so if we go to Netflix you'll see that the react tab now is available here but in this course we need a few more things we also need the Redux Dev tools so let's go to github.com forward slash gay run so g-a-e-a-r-o-n forward slash Redux def tools there's a dash between Redux and devtools and once you get to that page this is the link to get more information around the Redux Dev tools there's also links to the specific browser extensions and this is exactly where I want you to click so click on browser extension and we're going to go to this link here which will bring us to the Redux devtools extension and then go to Chrome web store so if you're using Firefox you can click on this one as well here but I'm using Chrome so I'm going to click on this one and then because I already have it it's already added to Chrome but if you don't just click on this link and once we have our application running with Redux and we'll need to set up a few lines of code to make that work then you'll be able to see your store you'll be able to see the different states in history of of your application so we've explored the editors that we need to install we've explored the dev tools that we need to have in order to work with Redux all right so we got our tools installed now let's take a look at the project that we'll grab from our previous course react from scratch so if you haven't done that course or if you haven't taken it because you're familiar with react we have some exercise files or a GitHub repo that you can pull the files from that specific project so let's go ahead and take a look at that so first go to github.com forward slash Manny Henry forward slash working Dash with Dash Redux so this is the repo for that particular course and you can either clone or download the specific repo but once you have it in your system grab the files basically on the video that you're on so right now we'll be working from number five up until number five you can use the files from number five this is where we start actually implementing new code inside of our application but as we go along in each of our videos you can grab the files from that specific video so once we're at six you can grab the files from six and so just so you know the files in that specific folder are the start state of that specific video so if we're looking at the files inside of six then you're looking at the files at the sixth video before we start implementing code in the sixth video okay so let's go ahead and go inside of our vs code grab Explorer and then open folder and let's go ahead and go inside of the repo or the download that you just got from the repo and let's go inside of number five so what I'm going to do is start my terminal from number five so let's go and view click on integrated terminal or use the shortcut and then copy the path of that specific folder here so number five and we'll do a CD for change directory and paste and then we're in the directory number five so as you can see we have most of the files we're only missing the dependencies that react installs when we first create our project so it's going to leverage the package.json file and then install all the dependencies that are mentioned in the package.json so we need to install those so either you use yarn if you're familiar with yarn you just do yarn or you do npm install and I use yarn most of the time and also use npm but for this particular course I'll use yarn to give you some examples of what it does so let's go ahead and do yarn and it will install everything that we need um pulling from the package.json file okay so now we have our dependencies installed let's start the project so you either do yarn start or npm Run start and this will run the application and open up your browser and let's go ahead and do localhost 3000 if it's not running it and we got our application from the previous course so a couple of things that I need to mention about this specific project so if you haven't or not willing to take the first course because you're familiar with react you just want to learn about Redux please take note and let me show you what I mean go in the code and then go inside the source and then app and then scroll down to my Firebase initialize app code those specific credentials are from the previous course and when you actually take the course they may actually not work because I've deleted the app or because you need to use your own credentials and you haven't done the first course if that's the case do not worry if the application doesn't work do not worry because we're not going to use Firebase with the Redux application we'll actually comment or delete some some of that code in future videos so do not worry about it we'll fix those errors if you have any errors otherwise if it's working if you follow along on the previous course then no worries for you so this is going to be the application that we're going to use that we're going to refactor that we're going to add new files remove some files to make Redux work in this project okay so now that we have some Redux dependencies installed let's get some Basics covered with flux and Redux so if you look at my slides here you'll see that first we have flux so flux is kind of the grandfather for Redux then abranov basically took some of the concepts of flux and created Redux so in flux you have an action and then the action dispatches the store and it could be multiple stores that's the major difference between flux and Redux that you have multiple stores versus Redux where you have only one and what happens after that the store updates The View so an action calls on to the store and then changes are made to The View and then you repeat the same thing so the view if you click on something on your page or if you click for example to add a note then the view calls an action dispatches the store and then the view updates Redux Works a little bit differently so in Redux you have reducers so reducers basically take actions then changes the state and then updates the store and then the view is rendered so what happens is the same cycle as you saw in flux whenever you have actions that are or events on The View then actions will call and then reduces changes the state and then stores it in the store and then the view updates based on the store so what action creators are there are ways to create the actions themselves so once we call a specific action so for example if you take a look at the screen we're calling get notes then we're returning that type of action then the reducers changes the state based on that action and then renders The View same thing if we add a new note then we are calling on this specific action called add note and then we're passing a note that we need to add to our store so the reducers take that new note changes the state so adds the new note and then sends it to the store and the view is rendered so this is what a reducer is so the actions like I mentioned the actions comes in and then the reducers changes the state so in the case of our add note here we are returning the Old State and then adding the new nodes to it and then we're creating a new state with that same thing if we're getting the the notes then we're returning the state as it is so we're getting the nodes from the state and finally the store is the one place where all your data is it's kind of if you're doing react without Redux is the state so the places where all your data is where your UI states are where you have a single state tree and finally it's unidirectional so what that means is that you can only change the store or the state by calling on to actions from The View so if there's no actions that are going inside of the reducers and are changing the state in the store nothing happens that's the only way we can actually change the state and therefore the data that the application is feeding from what does that mean is that the flow of data only goes one way and then it renders The View so this is pretty much how Redux works if you are not clear if you you don't understand yet what it is then in summary what happens is you have your store your store renders your views So based on what the information is in the store your view is rendered then when the user clicks on something on your page then an action is call and then the action is going through the reducers the reducers changes the state based off the action that we call and then the store or the state actually re-renders the view again it's that simple but again sometimes it takes a while to get a good grasp of Redux but as we code or store or actions or reducers I will re-explain some of these Concepts to make sure that you understand what we're doing okay so now we got our project ready let's install Redux and all the dependencies that we need to start working with Redux we'll also refactor some of the application and the code like the code that I mentioned earlier to make sure that we're ready to accept Redux and all the new files so let's first go inside of our terminal and let's do a yarn add or you can do npm install dash dash save and we'll add a few dependencies so the first one we need to add is react Redux then we need to add Redux then we need to add Redux immutable State invariant and this will use to be able to leverage the dev tools that I've showed you earlier then we need to add Redux thunk perfect so now this is going to add a whole bunch of dependencies for Redux and the next thing we'll do is remove some dependencies that we've installed with the project in their previous course so we'll go in the package.json and remove Firebase and low Dash we're not going to use those dependencies I'd rather work with a clean slate and a clean project than actually have all these dependencies that are kind of loading the the project so that's why I want to remove those save that and let's do a clean node install while we're continuing with the project so let's delete the node modules folder so you right click on null modules or use whatever tool that you use to delete your modules and let's do a yarn again to reinstall the dependencies that we have on our package.json okay so while it's doing all this let's go ahead and add the files that we need so the next thing I want you to do is create a folder in the source folder right here called store and that's not where I want it so let's do a right click on Source new folder and then call this store like so and inside of our store let's add a few files so the first one that I want to add is actions and I'll explain when we get to that specific subject what they are and how we code them then I want to add also a reducers file then I want to add a third one which we'll call the store dot Js like so okay and last but not least let's go in the app.js let's delete some of that code that we created initially because we're going to use a lot of the stores action and reducers and a whole bunch of code related to Redux to do those specific actions that we've leveraged Firebase in their previous course so let's delete all this and I want you to delete all the way up to and again I'm having issues with scrolling so let's delete Lines by lines when I'm seeing I would have a lot of issues if I would delete all this so let's delete just that and slowly go there like so perfect let's keep the state for now and we'll change that when we come to start working on the store and what I want you to do also is to remove all the functions in the form component that we added in the previous course because we're going to change some of that with Redux let's go ahead and do that let's remove these here too let's do that for the header as well actually the header we can keep because we're setting up the name here with many so that's not going to have any large impact to our application okay so we've cleaned up the project a little bit I would suggest that at this point don't start the project yet because we still have some code to do and most likely the application is not working properly at the stage but follow along and we'll fix that very soon so what we've done is install all the dependencies that we need for Redux first and then refactor a little bit of our application to make sure that we're ready to accept Redux okay so now we've looked at the basics of Redux now we need to start coding some of these Concepts so we'll start with actions so if you go inside of vs code and open up the project I'm currently number five that's fine I'm actually using the same project long so if you're following along with the exercise files grab the right number for this video and what we'll do is first code our actions so these are call Action creators there are actually returning an action that we can use and then pass that along to our reducers so let me start coding so the first thing we need to do is add the three things that the three actions that we're going to do with this application so if you remember or if you took react from scratch we are first getting our initial notes then we are adding new nodes and then we're removing the notes so those are the three actions that we need to create so the first one we'll do get initial notes and again this is purely creating a function in this function we're returning a type so this syntax is very important so when you create the action creators you need to follow this type of syntax so we're calling a type of action that will pass inside our reducers so first off when we call the action we're going to call the type so type is get notes and then with this specific action we're going to do something in our reducers so that's the first action that's how simple it is then we'll create the second one and the second one is add a new note like so and then in this one we're passing the note so when we add a new note we'll have an object that will have an ID that will have a title and then details for that note and then we need to pass that object to our function and then we'll return this one is type of add note and then we'll pass the note in action creators or the actions themselves nothing happens here we're just simply calling a type of action we're actually passing whatever data that we need to add in our reducers and then the reducers actually does something with our action and then changes the state and then returns it into the store so we can render The View based on the state so in this case we're passing a note and let's create our final one which is remove note again we're passing a note that we need to remove and this one will be called type remove note now you may be wondering why are we doing the type in all capital letters the reason is this is kind of the I guess the industry standard this is how the syntax is written so you could also do it with lowercase letters if you'd like to that's not an issue but if you want to work in a company where they've been using Redux for a while this is kind of the industry standard on the Syntax for the types okay so we are good for the actions in summary what action creators do they return an action so when we call them from The View that action will have a certain type of data that you need to pass it or not and then go into the reducers with that type of action and also the data that needs to be passed and then the reducers are going to do something with it so what we'll do next is exactly that start coding the reducers and you'll see what happens when we call them a specific type what happens to the state once we call that action okay so now we got our actions let's go ahead and code our reducers so if you remember when we first did our application we had an initial State sometimes it was empty sometimes it had some data in this case we'll just add a few items in there so we have something in our view so we'll create a variable called initial state like so and then inside of that object we'll have the notes hooray that we've had also in the last course and create a few notes so remember in react we always need a unique key and I'm just adding a whole bunch of characters here to make it unique like that we'll have a title example note the details of that note this is an example of a note okay so let's copy that note here that object and paste it and then we need to change a few things to make sure it's Unique so for example we'll change the number here let's just do whatever it another example note this is an example of a note again like so okay if you remember we also had a name so we had our name object our name property I mean with many or you can put your own name in here okay so we got an initial state then in the reducers what we'll have is a function that will take the initial State then return that state and if a specific type of action is called so for example if we need to add a note then that note will come in with the type of action add a new node and also we'll have an object called note which we need to add to the state so all these different cases will be handled by the reducer so let's go ahead and create our default reducer and it will take as the initial State the initial state that we just created and then it will take an action so the action that the view is calling will be sent to the reducers and then we will do a switch statement so this is like doing an if or else if else so after that we'll have a switch statement so this is basically to handle every case of the type of actions that we're passing to it so like we're passing the action and then the type and then in each case we'll have the action that exists in our action creators so if the case so if the action that has been passed is add a note then we'll return and I'm using again es6 syntax so some of this is uh all es6 syntax so we are returning the state and and then adding to the notes the new note that we've passed so we'll take the state DOT notes and then pass the action that note so let me stop briefly to explain what's happening here and it's going to be very similar to all the other actions afterwards so we're calling from the view the action add note in that action and if you go back to the actions here we have a node that's being passed as well so once we are calling that action and then it's sent to the reducer and in the reducers we'll have the case of add note we'll take the state add the new note to it return the state and then your store will be updated and then your view will automatically be updated and this is what's Happening Here so in the case where we have remove note and I'm doing exactly the same thing that I did with add note we will return the state again and I want to introduce the idea of mutable state in redox we're not mutating the state we're not changing the state we're simply copying the state creating a new object of the state adding whatever action that we've added so whatever data that that's been added by that by that action and then returning that new state so we're never really changing the Old State we're simply creating a new object adding the new information and then that's the new state so this allows you and we'll see this in the Redux Dev tools this allows you to see the history of your state so you can go back in time and simply remove an action and see what your state looked like back then so that's very useful so let's continue with our remove note so in this case we're taking the state that we just created from the old State and we'll we're filtering out the note that we've passed to it and therefore removing the note that the action has passed and I have made a quick typo here let's make sure we fix that there you go double equal perfect and I forgot my return statement so let's make sure we have a return statement otherwise this is not going to work there you go so I just created a new return statement we'll place what I just created and lets us make it look good too okay and the last case and feel free to pause and challenge yourself the last case is get the notes so this is the last action that we can pass to the reducers and let's make sure we have our return statement and we're basically returning the state as is like so okay and when you do reducers or a switch state for for that matter you always have a default so in this case the default will be returning the state so if there's no actions that are being passed to our reducers then it will return the state and the state is again that initial state that we have in here and then save okay so I know I've coded a lot of of things here again if reducers are not really quite clear yet please go back to my explanations or rewind this video to make sure you understand what exactly are reducers they're simply taking an action returning a copy of the Old State creating a new copy and adding whatever action you added to it so if you're removing a node then you're removing a node from that state if you are adding a note then you're adding a node to that state this is basically what Redux is and hopefully it makes a lot more sense now okay so now we got our actions we got our reducers let's go ahead and code our store so the first thing we need to do is set up our store so we need to create all the initial code from Redux to make sure that our store exists so we'll do a little bit of importing here first so we need a few functions from Redux one is create store the other one is apply middleware and a third one is compose and a word getting this from Redux then we need to import the root reducer from our reducers so basically we are grabbing the reducers from the file that we just created and sometimes what happens people like to have multiple reducers split out in different files that's okay too when you do that you need to have an index file which calls on to these these different files and then call it here as the root reducer there's a lot of documentation on the Redux website to give you how to do the root reducer and different files for the reducers as opposed to one big file like I just did but depends on the size of the project okay so we'll also import Redux immutable state invariant from Redux immutable State invariant and I'm going to check just to be sure there's no typo here because this is where some of the typos could happen so Redux immutable state invariant from redox immutable state invariance so we're good then and import thunk from three Ducks thunk like so okay then we need to create our store so let's go ahead and do that so we need to export the default function configure store so we're configuring our store with our initial state and then we're returning create store and then we need our root reducers in our store let's make sure we don't have an S here so we're good we need to have our initial state in our store we need to and this particular function here is for allowing us to use the dev tools to Redux devtools and that's why I need to do that so let's go ahead and apply the middleware so we're basically using apply metalware to have access to the Redux left tool Redux immutable State Fair invariant by the way use autocomplete as much as you get to avoid making mistakes or avoid making typos so I created that import here redox immutable State invariant I want to make sure that the name here is exactly the same thing otherwise there's going to be errors once we run the application and this is a function okay then we're going to make sure that this is available to or Windows of our browser by using this here window Dev tools and this is all boil play code to to make sure that we are able to use the Redux tab tools function okay and then let me make sure uh there you go and let's just save some space here and do that perfect okay so we got our store now let's update our index file to make sure that once the react application runs that it's able to first run Redux and create leverage the store and apply it to to the app component okay so we need to import a few things let's import and by the way I'm always putting the Imports that are coming from node modules first and then the actual files in the source folder so for example in this case I'm importing the provider from Redux react Redux before I'm actually importing a file that sits in my directory let's make sure this is spelled out properly it's not redo but Redux okay then I need to import from a file perspective a few things like the configure store so we need to import the configure store from the store that we just created so this sits in our store folder here and in this file so let's go ahead and do that then we need to import or get initial notes action because when your application starts it needs to have some data to run so we need to import the initial nodes and use that as the initial state of our application and then let's do store actions so last but not least we need to create a store variable which will have the configure store information that we've created so basically we're taking all the information here and we'll start our store here so store and what we're doing finally here is dispatching our first action so when the application runs this is how we're calling an action so we're going to call the get initial notes action and then have those notes ready to run on the application so dispatch get initial notes and that's why I've actually imported get initial notes for my actions function like so and the last piece of code that we need to do here is when our application runs we need to Leverage The Container provider from the Redux Library and then pass the initial store to it and we're going to wrap our app inside of the provider like so let's make sure we put in between like so and then document get element root doesn't change and you got your first Redux store so that was a lot of code what we've done in this particular video is really create the configuration file for the store and then in the index or the top level application file where our application is actually started we've actually imported that configuration created our store got the first action get initial notes dispatched it so called it and then we're pulling that data rendering our initial View good job okay so now we got our store we got our reducers we got our actions but we need to update our views because our views right now are not leveraging the power of Redux so let's make sure that we do that so the first one that we need to update is our app.js file so if you don't have it opened click on app.js here and the first thing I'm going to do right away is remove the low Dash and Firebase because we're not using those anymore and what I'm going to do next is import a few things so first we'll import connect from react Redux and this particular function will be used to connect this particular view to the store okay then we can actually we need to import a couple of more things so we need to import our actions so get initial notes we need to import add new note because this is the top level component we need to have our actions enter that specific component and then we'll pass it as props to other components all right so let's add remove note and we're calling all these different actions from our actions in our store folder perfect all right so let's move on to the actual component here so first thing we need to remove this because we don't need our state the way we used it in the previous course and we can remove all these lines and then we are going to return the header and this will now be prop stop name because we're going to be passing it from the actual store so then in the store we'll have add new note which we are going to pass add new note so we've imported a new note here so we need to pass as a prop to the form like I said we are leveraging all these different actions in the top level component and then passing them as props in the grid we'll have notes so we need to have the nodes passed to the grid otherwise we won't see anything on the screen and we also need to pass remove note which is the action that allows us to remove the notes and this again is passed as a prop like so okay the last piece and this is particular when you do Redux integration inside of your react application we're going to make sure that we're matching the actions to props and therefore be able to pass these as props and this is a function that's called map this patch props and we're going to dispatch and own props so what we're doing in this particular function here we're making sure that all the actions that we've imported here can be passed as props to our react component and I guess the benefit of doing this is to be able to change our components to change the react aspect of our code without always thinking about well I have a redox implementation on the back so right now I'm passing them as props because they're not actions really at that point they're props and this is where we're doing that so this allows us to really isolate the code the Redux code from the react code so if you make any changes to your components down the road you can still use the props from the Redux actions so let's go ahead and create our props here so we're creating a prop of get initial notes and using the function dispatch from Redux get initial notes so what's happening here is when we are using the prop get initial notes we're dispatching the action get initial notes and this is a function okay and we'll do that for all the other actions as well so let's copy and paste and simply change the name and again when you're copying and paste please pay a lot of attention to what you're doing because this is where mistakes happens I know I've done it before and you note and you want to make sure that you're calling in and your notes Here like so and any note needs a note as a variable so we want to make sure we pass it to the function or the actions that we're calling and the last one is remove and let's use a very useful function of vs code so I'm doing option click to highlight both that I want to change and then adding remove note and remove note takes an ID like so Okay so we've matched up the last thing we need to do is map our state to props and this is basically mapping out the state to our component from the store and passing them as props okay so return we are returning the notes which are coming from the state DOT notes and we are returning the name which is coming from the state DOT name and the final piece of code that you need to change here and this is where we're using the connect function is to connect everything that we've created here so the map dispatch props and the map state to props to the component map state props map dispatch and I've actually set the reverse of what I'm typing by the way if you're confused a little bit so map dispatch props map state to props and then app like so okay so that was a lot of code so what we've done here is basically make sure that all of our actions are mapped as props so we can pass them to our components and then we made sure that we mapped our state to prop so we can pass those props as well to components and then we connected it all at the end of our code here okay so now we need to update our form we've worked on the app.js we got all of our stores reducers actions ready let's move on to our form so go inside of vs code or whatever editor you're using and click on form inside of the components folder and in here we're going to make a few changes so let's return that line because we have a lot of changes to make on the on submit and let's literally clear that up here and we'll start from scratch okay so what we need to do when we submit the form we need to pass an event and as you can see I can literally again in between curly braces add as much JavaScript as I want this is the GSX syntax it allows us to add any kind of JavaScript code in here if you want again this is es6 syntax so if you don't recognize this this is a function and we're passing an event variable so the first thing we want to do is prevent the default so we can control what's going to happen here and we'll create a note with the information that we have in our inputs so remember if you haven't taken the react from scratch class basically what we have is a form where we enter a title and then details for that note and then we click add note so those two inputs will need to grab it create a variable before we actually submit to our state so for the ID whenever I need to create specific IDs and kind of make them unique I use a function called crypto so what I'm going to do here is import crypto and this is available when you're using node to anybody you don't need to import anything to make this work and then do random bytes fine so that will give us a unique number with five characters and then make it to string like so and use x so this will create a unique ID for each node that you add using crypto all right so we're going to use the title and we're going to pull it from the title input and grab the value and we're going to do the same for the details and by the way the refs is what we're going to use inside of our input to reference that particular value and grab it from the input okay so our note is created then let's also once we have sent our information to the store or the state make sure that we clear the value so this is what we'll do here and let me copy and paste this so we are not repeating code over and over and over and this one is the details and then we're going to add new note with the note so let me quickly explain what's happening here so once we click submit the variable note will be created with crypto creating a specific unique ID then we'll grab the title from the input call Title and we'll do the same for details and once that variable or that object is created what we'll do is clear the form and then call the action add new note from Redux and hat denote to it so the note that we just created here will be added to the action okay so let's clear that up a little bit so it's cleaner so the class name can go here so this is still that form element here we're still in the form element okay so let's go ahead and add the ref to the input so we can actually pull it and if we don't have this we won't be able to call it from here and we can remove the value here and we can remove the unchanged because we're not using that anymore this is this was all from the previous course and let's make sure that we have an idea for that input of title and the name is good the type is good and let's add a class by the way this is a class that comes from materialize where it allows us to validate that they're we're typing so what's going to happen once we start typing in that specific input it's going to change the color of the line under perfect so let's clean that up again make sure that we're not having any space for for nothing okay and we'll add a label title and then call it title so that label will show on our form as well okay and copy that particular label paste it below our input here and we'll call this label details and make sure you change that this label is for details and let's also add the ID like we've done for our other input and remove those functions we don't need them anymore and add the reference so we can use it as details like so all right just before we go we need to fix here I did an a as opposed to details so let's fix that typo here okay so now we've completed our form now we're able to use Redux inside of the form and use the add new note as an action that we're calling once we have that note or inputs with title and details so once we add a new note we'll be able to update our state with that new information okay so now we got our app.js updated we got our form updated now we need to update our grid and our single view let's go ahead and do it the first thing I want you to do is go inside of grid so if if you don't have it open click on grid inside of the components folder and then simply scroll to here where you see delete note and simply change delete note to remove notes so I'm using option click to select the two and we'll simply change this to remove node because that's the name of the action we changed it and then inside of our single do the same so instead of doing remove note let's click and option click for the second one and then remove note like so okay so let's quickly check if everything else Maps up properly so we got a remove note change here everything is good save that go to single and then in single we need to change the delete note again to remove note remove note and then pass the note as opposed to note that ID okay all right so now we're ready to test our application so let's go ahead and run the application so first you need to go inside of view and click on integrated terminal obviously if you're using vs code if you're not using vs code just pull whatever terminal you're using and let's make sure we're in the right directory so copy path so right click copy path and then CD okay so we're good so let's do a LS to make sure yeah all right so I have my no modules so let's just run a yarn just to make sure that we have all all of our dependencies installed okay so our dependencies are installed let's go ahead and do a yarn start or npn we're on start and what I'm going to do is do option command I to see if there's any issues let's go inside of our console materialize that's okay and we have a quick error here so let's go ahead and take a look at that okay so we got a little error here and what it says is basically it can't return the notes that we're getting from our state so something is wrong something is not passing the notes to the single or the grid so let's go into our code and what I would first do is to make sure that first of all in the app.js we're passing the props properly so if I'm looking here we're indeed passing notes and we're indeed passing this dot props dot notes in our map state to props is done properly so we have notes we have the notes prop that we're creating and we're passing the state.notes and this would be a good opportunity also to take a look at the redox Dev tools so let's go into our browser and do option command I and in the tabs click to Redux and the Redux tool basically allows you to take a look at the state at the current state so basically where it is right now after you've done a couple of things so as we do some actions we'll see those actions here and then we'll see the state change so as I can see my state is okay so I have two notes and I have the name many so in theory I should be able to go ahead and use those so let's go ahead and take a look at something else so I believe so the store looks okay let's take a look at our reducers are reducers here are fine so we're returning the state and default returning the state okay so let's scroll a little bit for oh that's a stupid typo it's an s that I'm missing so it's not note but notes all right so let's save that it happens it happens to the best of us we make those little typos and then it breaks the whole app and we're back okay cool let's go ahead and test it add oh that's something else this is purely aesthetic um usually materialize should have that label go above for some reason it doesn't seem to work so let's just remove that because it's distracting go inside of your form and simply remove the label like so for both so let's remove the label for details and let's remove the label for title like so perfect save the application will restart and our labels are gone so let's add a note and while we're doing that I'm go well actually let's add the note first and then take a look at Redux so let's add a new note for testing and then just enter a bunch of gibberish and note so this is cool it's working so let's remove a note so let's remove the one in the middle so let's click on delete it's gone so that means everything is working fine so let's take a look at the redox Dev tools so this is very useful when you're testing your app you want to see what's the current state of your state and see what actions are doing to your state so let's do option command I and let's go into Redux and you see all the actions that we've done so initially when you start the application it gets the notes so your state is at that stage so we can actually go back in time and literally jump to here and our state will look the way it was then we could jump to this particular actions there and then you see that the note that we've added is actually added to our tree and you can also look at the state differently so you can take a look at the chart here and see the information differently if you want and then finally when we do the remove note then we're removing another note and then our state is now with two notes one that we just added and the one that was originally part of the initial state so this is what the redox Dev tool allows you to do is kind of see your state throughout time and that's why we're not mutating the state every single time we're adding a new thing or executing on an action is because you want to check your application as it grows so everything is working properly and let's test it one more time let's add a final note and gibberish gibberish add note let's go back inside of our redox devtools like so and we added a new note and one other thing is that you can always see the difference of that specific action so it tells you that we added this new note to the state and therefore we have three notes now the one that we just added here add a final and if you want to inspect also your application through the reactive tool like we've done in the previous course you can take a look at what the app looks with the state here so if we take a look at app then we have all the props that are being passed through our application for example the three nodes that we have so that completes updating our views we've actually updated our form or Grid or single and our app.js and finally we've actually tested it with Redux Dev tools and the reactive tools and make sure that everything works properly so Redux is not the only library that does State Management there's obviously flux which is the granddaddy of these libraries but there's Redux and there's also mubex so let's jump into our browser and go to mobx so m-o-b-x dot js.org and on this page you're going to get a lot more information about mobx but if you're curious about what mobx brings to the table in terms of State Management and what are the main differences in between Redux and mobx they are as so so first of all both are working with react both can work with other libraries like angular so that's not a huge difference there the second thing is that Redux the state is immutable so you can't mutate the state and this follows functional programming practices and the the idea of a pure function versus mobx where you're following a no PP so objective oriented programming approach where you can mutate the states so that's one of the major differences also in mobx there are multiple stores you can have as many stores as you want pretty much like flux versus Redux where you have only one store the other difference is also where my backs use a lot less code to do what Redux uses a lot more code so in the end it's your own personal choice so if you're someone that loves object-oriented programming versus more of a functional programming approach then go ahead and use mobx if you're someone that loves to do multiple stores you'd like to kind of separate the contacts of those stores then use something like mobex I personally use Redux more than than mobx and I've actually used mobx once and really didn't feel good for me but it's again your own personal taste all right so where do you go from here with Redux the first thing you could do if you're curious and where redox came from you could explore flux so flux is kind of the granddaddy of State Management and then abranov who created redox took the best concepts of flux and then created Redux you could also explore Bob X if object-oriented programming is more your style and you prefer to create multiple stores you prefer to use observables and have all these little tools that we've explored with mobx second you can also add new actions update the reducers and have little things like for example if we click on a card change the color of that card so you would pass an action change color to Red the reducer would update the state and then your view would change to that right color you can also add a whole bunch of actions like update the card and so on so forth final but not least you could also explore all the other courses in this learning path so if you haven't done react from scratch and you're curious about that one then go ahead and do it we're also going to explore react router and also design patterns with react so feel free to explore any other course on this learning path

Channel: Code With Jimmy

Views: 1,099

Keywords: #ReactArchitecture, #FluxandRedux, #JavaScript, #FrontendDevelopment #Programming, #ES6, #WebDevelopment, #FrontendFramework, #WebDesign, #ReactJS, #ComponentBasedArchitecture, #UserExperience, #UIUX, #ResponsiveDesign, #SinglePageApplications, #ProgressiveWebApplications, #StateManagement, #MobileDevelopment, #DataManagement, #APIIntegration, #Debugging, #PerformanceOptimization, #CodeOptimization, #WebAppSecurity, #CodingStandards, #Testing, #CodingBestPractices, #CrossBrowserCompatibility, #ModernWebDevelopment

Id: j5xXV8epngw

Length: 66min 11sec (3971 seconds)

Published: Sat Feb 18 2023