 This talk has a lot of code and you know would help you a lot if you are already using Redux but even if you don't some of the problems that I mentioned can really help you in evaluating your own decision. Okay, how many of you have worked with Redux? Okay, cool, yes. How many of you know about ES6 restructuring? Okay, cool. So my slides are available over here, Redux DD deep dive quickly slash Redux DD. So if at any point of time you want to go about, you should check them out over here. I'll just give a brief about what is restructuring. So let's say you want to create a new object with the keys of state and you want to add these two new keys, key 1 and key 2. So in ES6 you can do it quite easily by just restructuring state that is using the three dots and then passing key 1 and key 2. So it's just restructuring. Okay, so this is my agenda. I'll be talking a brief on Redux basic. Then I'll be talking about enhances and middle ways. Then my problems, partial but failing solutions which I came up with and then my proposed solution. Okay, so this is React's philosophy function which takes your props and states to V DOM. What React does is that it takes your V DOM and then it converts and it manages your DOM for you and any changes that you need to make. This happens which modify your props and state or props of your children components using just set state. So this is where Redux comes in. Facebook internally created flux but Redux is a much simpler solution to managing your data. What it gives you is that it gives you a single sort of truth that is your state, injects your component when an event occurs, it dispatches an action, state to the reducers and it provides the news and it creates the new state which then again is passed onto your component. So how do we do this? Store using create store provided by Redux is the reducer as the prop to the provider component. What it does is it provides your, it sets your store into the React context and it's available at any point of time. Extract properties out of your Redux is sort of binding for Redux to react. The map state to props function, so you extract like let's say I want the user from my store. So your component with the map state to props that user in your component. Next up, so how do you dispatch an action? So you along with the other props, you also get an extra prop that is dispatched. You can call that you want and this will dispatch an action for you. What Redux will do is that it will take that action and it will pass it to your reducer along with the current state. What you have to do is take the current state and modify that we've seen that it's time to level up. Enhances are basically wrappers around create store. There are functions which take in create store and return new create store. Which logs on every get state. When it gets called, it will call create store with whatever props that gets passed. What will do it will return the store but it will also over get state was returned. So how to use reducers to a function which was, which you saw earlier was provided by data. You change them to create store, you can either do this or you can compose them together. This compose what does compose do your multiple functions and do something like this. So goes to second, the return value of second goes to first and whatever first returns is what you get. Where one fish eats the other. For example, if you modify your store, that gets shipped with redux is applied with redux. It's the only enhancer that is shipped with redux. What it does, it takes a list of middle ways and it creates your enhancer for you. It will call the original store. Patch is called what it will do is like a layer of mosquito nets you can imagine for each dispatch. All these that you want to inject, you can inject it with the new store and over here patch function. So what are middle ways? Don't worry about the complex testing. So as I, as you saw earlier, here they are initialized with the store. Here they are initialized with the next dispatch function and then action is called this action is triggered. This function gets called and basically your middleware needs to call the next middleware in the chain. So what it does is first and second arguments and it will cancel that action from going forward. And if it's not a function, it will just allow it to move forward. So over here, this is a function and should be dispatch and get state. You can get them using get state. So let's say for example, you have the title, your documents title also stored as user checks the title and after the reducer is after the store is reduced, it will get the new title. So it will compare that, you know, if it has changed, then I will modify document.title. You don't need to, you know, you just need to modify it in your store and your single source of truth. Your store manages it everywhere. Why do I mention non DOM side effects? Because DOM side effects are handled by react. So also one more example of middleware is that what we use is that you can track, you know, user breadcrumbs or user flow. So we use sentry, which is an error tracking library for JavaScript. Action occurs, we send that to sentry that, you know, hey, this is what the user flow has that shows that, you know, these actions are triggered. We compose that with Redux DevTools, please talk, which is right after this one, which I faced with that they might be my superficial problems. It's, you know, it depends on person to person. So instead of dispatching, do something amazing. I might dispatch do something amazing. Okay, so how do I solve this? Well, you can, you know, take a string and, you know, export it and in your action, you can import it. The reducer, you can again check for it and you can create your switch case on it. You might say that, you know, hey, what if I make a spelling mistake over here? Well, the import that you're using is being exported by the file that is exporting it. So just keep on increasing and increasing these three places, actions, reducers and actions list. I'm just too lazy. I'm not going to maintain it in three places just to me from making typo. My next problem is types. It is a speed to this particular action. So I make the changes in my reducer. Accordingly, previously it is taking ideas action dot payload. Now it takes it to action dot payload. You've done this code, it goes into production, but let's say you forget it in a different location. That is put confidently in a lot of flow. There's type script. So all of the examples that follow whichever one you want for my store. Now I have typings from Redux store of state and my state and my action while my dispatch is a Redux dispatch of my action type. That is of type. The shape of a type I have to maintain in three places than my action types. So this is too much. These things, this is something that I can but I won't as you know fallback action. Now we don't need to and just you know this fallback actions covers everything and not the point of it. We created types for our actions so that we can you know stop making bugs in production. Four problems. One more. Imports of switch cases. It's very difficult for specific chunks which get loaded. What I want is that I want to move that to the async reducer code. So one example that you can use is that you can use store.replace reducer. What you can do is that you can create a reducer for each round case reducer to replace you know use the new reducer which is now the actions which are globally like you know CSRF etc. So for those things you have to you know implement the merge reducer function to you know merge both each chunk will define your reducer. So each, each round specific chunk along with define end needs to be rendered it will also define its reducer. So could have replaced reducer. Problems with this approach. It is difficult to migrate if you have already implemented redux and you are already using redux and another is that you know it's very difficult to ensure that you know that reducer will be revamped on mobile pwf at housing desktop website. What happened is that we found this to be a pain point hour. So this was a pain point at that time and we realized this. We thought that you know in a new code base we will make sure that you know we use this you know store.replace reducer and we had these problems. What's the solution? What's the since last 15 minutes? Well, why not dispatch your reduce matching or type or string? What you do is that you dispatch a function which is from reducers. So and similarly this is your reducer function which you have exported which takes in state and payload and you know does whatever it needs to modify to your state. So kind of like you know you can you know use state state you can instead of passing objects you pass functions. So similarly in your actions instead of passing a type string you pass in a function. So fix my problems. So let's go ahead with my problems. Number one typos because I am importing them from a different file. My second problem was types. So I define my types in this such a way. So my reducer of a state second argument is a payload which is of that takes in a reducer of also needs to match that same generic type B. In an action of type T. So again I should have made P over here but the P stands for payload. My reducer basically it just I just have to mention you know what is the type of my payload over here and types in another action. My action I just mentioned that my dispatch is of type dispatch and it will do the payload to be of type number in a string. It will throw flow will throw an error type number but your payload is of type string. This is the mistake and you know it will point the mistake to me over entry chunk my store required also required in my action. So if with that action history shaken similarly my reducer will also really helps you know the reducers it's a generic component. Now it's usage might not use all of use just a small portion of it. So if you know any route specific to config your webpack such that it eliminates NC dot example for webpack pre shaking exports explains it really nicely how you should you know tune your webpack a conflict. So my fourth problem was reducers across my chunks. So this was what it was before before my this is directly loaded so present my store required my reducers and my middlewares they are moved to my component chunk. So problem users for every page of my website. So I mentioned the recipe earlier you create enhancers and middlewares over here in the action is of type object and the reducer is of type function with the name of that function. So why this is needed. This is needed for Redux DevTools and for Redux itself also needs the type key to be present on the action object. We don't be no longer the reducer in our action. Similarly what about the reducer that we you know we had to pass through the fields or we just create a dummy reducer. What it does is action dot reducer is present. We will call action dot reducer with the state and action dot payload and it will return the new state whatever you know reduction that it needs to make. So you know you can use it with Redux DevTools. So here's an example. You know it's found action and you know it's working. Here off this pull request because it provides the not present and it's so you will need to you know extend your state. I'm pretty sure you guys can go ahead with it. So a simple code mode for migration. It will be difficult to explain the code mode over here. What is for you know migrating your reducer with key value page on your reducer. It will migrate that to you know individual export statements as reducers. So what are the key takeaways that patients these slides are being available over here at Middle East slash Redux CD code links that you want. You can easily get them from here. So if you have any doubts you can if you can ask them right now or you can contact me and provide probably a code mode as a blog post on my begin. That's it in question.