In the previous module, you were briefly introduced to Redux. So we saw the various parts of Redux. We saw the role that the Reducers, that state, the store, and the action plays in our Redux support for our React application. Now, we briefly examined actions in the previous lecture when we introduced you to Redux. What are actions, and how they created and how are they used in our Redux? This is what we will discuss in this lecture, and then in the two exercises that follow, we will deal with creating our first set of Redux actions. So, what exactly are Redux actions? Redux actions are payloads of information that are sent from your application to the store in order to effect any change in the store's ticket. Now, when you send an action to the store, you use the store's dispatch method to send the action to the store. We will see how to use the dispatch method in the exercise. Now, when that action is constructed, what exactly does the action contain? The action is a plain JavaScript object. Now, when you define the structure of this JavaScript object, this JavaScript object should contain a type field or a type of property, which indicates what type of action this is. So when this action is delivered to a Reducer function, the Reducer function will be able to interpret what type of action that is, and then initiate the appropriate action to change the state of our store there. So, the type field is essential or the type property is essential in the JavaScript object. The rest of the JavaScript object can contain anything that is meaningful to your application, any data that is required for the action to be created. Now, this is what we will refer to as the payload which comes as part of your action. Now, in the exercise, you will see examples of how we construct the action, and then we'll see what goes into an action JavaScript object. You will specifically notice that there will be a type field that is specified for each action. The easiest way of specifying the type field, is to create a set of String constants called as the action types, and then make use of them when you define the various actions within your React and Redux implementation. To help us generate various actions, we make use of action creators. The action creators are nothing but functions that will return the action JavaScript object. So this function encapsulates the process of creating this action JavaScript object. The action creator is nothing complicated. Now, the resulting action object can then be passed to your store through the dispatch action. So, you will use the action creator to create an action object and then dispatch it to your store using the store dispatch method. Within your store, you have Reducers that take in the action as one of the parameters, and then takes in the previous state or the current state of your application as the other parameter and that generates the used state. So the Reducer should take the previous state of action and return the next state. Now, when it generates the next state, one thing that we have emphasized earlier also and I'll emphasize again, is that we should never mutate the current state. So, when you need to return the next to state, you will make a copy of the state, and then make modifications to this copy, and then return that copy from the Reducer function there. And the actions that are typically handled inside the Reducer function. So, you'll see that your Reducer function receives the previous state and the action. Now, when the action is received, the action has to be then examined and then based on the type, a property in the action. So now you'll see the reason for the type property in action. Based on the type property of the action, you will write typically that the Reducer function as a switch statement. So you will use the action type as the switch. And then switch on the action type, and then decide what needs to be done within your Reducer function. Now, the default case is that, if your Reducer is not going to act on that action supplied, sometimes the user may not have to make any changes to the part of the state that it controls in response to an action being delivered to it. In that case, it would simply return the previous state. Now, when we implemented the Reducer in the introduction to Redux exercise, we simply returned the state without worrying about what the action is specified. So that is the default return from your Reducer. For a simple application, a single Reducer function may be more than sufficient, but when you have complex applications especially when the state of your application has many parts, then it is more easier to split your Reducer into multiple functions. So depending on the shape of the state, you can split the Reducer into multiple functions and then each such function will be dealing with one part of the state. And then after that, you can recombine them to form the overall Reducer function. Let's take a quick look at the shape of our state in the example application that we have been working on so far. Going to our application, in the reducer.js file, you see that we have defined our state as consisting of four properties here. DISHES, COMMENTS, PROMOTIONS, and LEADERS. Now as you would expect, none of these are in any way overlapping with the needs of any of the other properties. DISHES is independent of COMMENTS, COMMENTS is independent of PROMOTIONS, and similarly of LEADERS. So, this also means that I could easily have separate Reducer functions that deal with each of the parts of my state, and then they will worry about modifying just that part of the state or that slice of that state. So, this will allow us to decompose overall Reducer into multiple simpler Reducers and then compose them together back into an overall Reducer based on the shape of our state. This facilitates more scalable way of developing our Redux application. So again emphasizing the point, you can split the Reducer into simpler Reducer functions, and then each of these similar Reducer function operates only on some of the fields within your state. So it manages parts or slices of the global state. Then after that, you can combine the simpler functions into a overall function by using combined Reducers, which Redux supports, and then create a way of managing the overall global state. Now, in the exercise, we will actually do this and understand how we can effect this in our application. With this quick understanding of Redux actions, action creators and how we can split and combine Reducers, let's move onto the two exercises where we will first split our Reducer into multiple Reducers, and then combine them together in our Redux implementation. And then after that, we will create an action, and then generate the corresponding action creator. And then use the action creator to generate the action object, and then dispatch it to our store and see the result in the second exercise in this lesson.
