React Redux Tutorials - 7 - Store

alright guys in the previous sections we learned about actions which indicate what happened in the application we also learned about reducers that update the state based on those actions in this video let us learn about the redux store which brings the actions and the reducers together right now we just know one thing about the redux door and that is for our entire application we will always have just one store although the concept seems simple enough the redux store has a couple of responsibilities first it is responsible for holding the application state second it exposes a method called get state which gives our application access to the state it holds third it provides a method called dispatch to allow any updates to the application state the dispatch method accepts an action as its parameter the store also allows our application to register listeners through the SUBSCRIBE method the SUBSCRIBE method accepts a function as its parameter which is executed any time the state in the redux door changes finally you can also unsubscribe to the store by calling the function that was returned by the SUBSCRIBE method now our goal is to implement all these responsibilities in our application let's start with the first one the store has to hold the application state if we go back to vs code you can see that we already have the state of our application represented by this single object we now have to create a store that will hold this and this is where we will introduce the redux library if this was a react application for example we would use the es6 import import Redux from redux however we are running this app as a simple node.js application for which we have to use the requires in tags SEC Const Redux is equal to require Redux the redux library provides a method called create store which we are going to use for as you might have guessed already creating the store so const create store is equal to redux dot create store now at the bottom we make use of this method const store is going to be equal to the method create store the create store method accepts a parameter which is the reducer function the reducer function has the initial state of the application this is required for the store to make the state transitions based on the actions receive so that is responsibility number one we Dec store holding the application state the second responsibility is to expose a method called get state which gives the current state in the store to implement this I will go back to vs code and add a log statement console dot log initial state store dot get state since we have not performed any state transitions yet yet State should effectively give us the initial state of the application all right let's move on to the next responsibility and I'm going to jump to responsibility number four which is the next logical step the fourth responsibility is to allow the app to subscribe to changes in the store that is achieved using the SUBSCRIBE method so back in the S code store dot subscribe and the SUBSCRIBE method accepts a function to keep our example simple we are simply going to log the updated state so an arrow function console dot log updated state store dot get state so that is our fourth responsibility now let's jump back to the third responsibility the store provides a dispatch method to update the state so back in the S code store dot dispatch and the dispatch method accepts an action as its parameter now you could directly provide the action if you want to but we have an action creator so as the parameter we invoke the action creator which in turn will return the action and to cause a few more state transitions I will dispatch the same action two more times alright that is our implementation of step number three the final part is to unsubscribe from the store by calling the function returned by the SUBSCRIBE method right now we aren't capturing the return function from the SUBSCRIBE method so let's add const unsubscribe this equal to store dot subscribe now after all our code has completed we can call the unsubscribe method and that is pretty much it we have implemented all the responsibilities of the Redux store we can now test our cake shop application in the terminal simply run the command node index and you should see the output log we have four statements logged in the console we have the initial state where the number of cakes is 10 and with each action of buying a cake one cake has been reduced from the store let's trace the code to understand how each log statement is printed the first line of execution we are concerned with starts at line number 30 this is where we create a redux door the create store method from the redux library accepts a parameter it is the reducer function which controls how the state transitions happen once the store is created we log to the console the state of the application which is in fact the initial State so initial state number of cakes is 10 after that we set up a listener to the store so anytime the store updates we log the state to the console when we dispatch the first action the reducer sees that the action type is by cake it will then try to match this type with the switch cases it matches the first case and then simply decrement the number of cakes by one and returns the new state so now the stores state updated the listener is called which locks to the console the updated state number of cakes is now nine similarly for the next dispatch number of cakes is nine minus one which is 8 and then for the final dispatch eight minus one which is 7 at the end we simply unsubscribe to any changes in the store this is pretty much the Redux pattern you create a store declare the initial state and the reducer define your actions and action creators subscribe to the store dispatch actions to update the store and finally and subscribe to the changes and this is really important to keep in mind this is the essence of redux when we dive into your react application this is exactly what we are going to do but with a few helper functions before we wind up on this basic example a quick note on action creators you can see that we have an action creator by cake now you could by all means pass in the object itself as a parameter to the dispatch method but by having an action creator any changes to the action object will happen in only one place imagine you pass in just the object to every dispatch method which is called in several places in your application after a few days if you have to either add a new property or rename a property you would have to do it in all the five or 10 different places so better safe than sorry and go with action creators instead of just action all right with that I hope you now have a clear understanding of the three core concepts the three principles and how to read X pattern words remember understanding Redux is the foundation to understanding react with redux so if you're still unsure please rewards the videos before you continue thank you guys for watching feel free to subscribe and I'll see you guys in the next video

Channel: Codevolution

Views: 239,771

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Redux, React Redux Tutorial, ReactJS Redux, React Redux Tutorial for Beginners, ReactJS Redux Tutorial for Beginners, Store in Redux, Store in React Redux

Id: YAevAj6X6XU

Length: 10min 32sec (632 seconds)

Published: Mon Sep 09 2019