 So, hi everyone, welcome to Node.js Interactive, this is a talk about will react hooks replace redux, my name is Trivikram Kamat. I had prepared this talk around 9 months ago and this was selected at the last moment. I am not actively working on react, so some things might have changed, but I will tell you what has changed. My name is, my Twitter handle is Trivikram and GitHub handle is Trivikr. If you notice, I did not get Trivikram handle on GitHub. That is because I joined GitHub pretty late in 2015 and the Trivikram handle was taken. So, if you recently become parents, then get GitHub handle for your kids. It worked. It is more important than any other social media which you are on. So if you are active on social media and want to tweet about this talk, then the hashtag is hashtag Node.js Interactive and since this talk is about react hooks and redux, you can use those hashtags too. Use these hashtags if you like the talk. If you did not like the talk, then use my name. But what is my name again? So you are in Canada and in Canada it is pretty cold. So you know this type of alcohol. It's a rum. It gives you warmth. So imagine a weak rum, not a strong rum, a weak rum and add three in front of it. That's my name. So this one also works, but that's it. Yeah, thanks. So what are we going to learn? So we are going to learn what is react state and why it's not enough. Then we'll learn what is redux and react hooks. Then we'll go through a simple to-do app from redux and we'll replace redux with react hooks. So let's start. So what is component state? So most of you who have used react would be knowing what component state is already, but some of you might be new. So I'll spend some time on this. So state is just data. A state for an application might change based on things such as user actions or response from an API. Now what are user actions? User actions are something you click something and something needs to be updated. That's a user action. What's a response from an API? You click something and some data needs to be fetched from the backend which takes time. So that data is stored in the state. So an application will read this state to determine what sort of user interface to show. So now all of you are at Node.js Interactive. So let's see the example app which is a shared event scheduler app for Node.js Interactive. Note that shared doesn't use react. I don't know. I just checked the web. The react, it was not showing react. I'm just using that as an example because you will have used it. So if you go to the info tab and you reload the info, then the loading bar comes. That is user action. So the user action will be is loading. So is loading is true, then show the loading bar. If is loading is false, then show if data is loaded already. Then if you say user data, that is if you go to my account, then it will show you your account details. So the state, if it was using react, it will store your account details like your username and password should not show, but then username and some other things. Or event data. All of you are here for this talk. And if you are seeing the talk page, then talk title, talk description, speaker name, this will be stored in the state. Now when react state is not enough, when an application is simple, state management is trivial. So this is from a media article. It's amazing. Do go and read it if you're interested. So when application is simple, state management is trivial. But as application gets complex, application state is spread across multiple components. And the functions that update the state also get spread across many components. So in the beginning you are very happy. And when your app becomes complex, it becomes difficult to manage the state. And to have an overview of the application state, you need to have a mental model of the application structure. So if some new developer joins, it will be difficult for the developer to understand what the heck is happening. So it becomes harder to trace state changes when debugging. So in the GIF or GIF, which you are seeing, the purple color change is a state change. So when state change is initiated, it has to be populated to the parent so that it can be propagated to the children where the UI needs to be changed. So you have to pass all this state back to the parent, you have to pass the state to the props. If you have used React, if you use components in complex application, you will realize. So what is Redux? Redux is a very common tool used in React applications for managing application state. And it is predictable. It is standardized. It is centralized. It is debuggable. And it is flexible. This is all you can read from the Redux website. We will just see how the application state changes, how Redux changes the state management. So what Redux does is it allows you to maintain application state at a single global store rather than in local component state. So in the previous GIF, you are seeing state was stored in two parent components and then it was just like, no, some magic was happened. Here there is a single global store. So for Redux, if you are new to Redux, it will be little difficult to understand, I will try to simplify it. There are actions. Actions are payloads of information that send data from application to your store. So in the GIF, you will see the state chain initiated the purple dot that is the action which goes to the reducer. The reducer specifies how an application state changes in response to actions sent to the store. So when the reducer is, operator reducer will call the store to change the global state. And what does store do? Stores the whole subjection state. It allows access to state via get state and many other things. So what are react hooks? Just let you use state and other react features without writing a class. So they are completely opt-in. You can try hooks in few components without writing any existing code. So don't worry, you don't have to relearn react. It's 100% they have 100% backwards compatible. So hooks doesn't contain any breaking changes and they are available now. They were released in react 16.8 in February 2019. So let's see an example of react hooks. If you want to open this example on code sandbox, you can click picture of this QR code. So here we have a class button which has a render function which shows the button. On click it calls handle click. And handle click updates the state. State has a value counter which is initialized to 1. When it's clicked, it just updates it to 1. So what I will do is, oops, it's not showing, oops, I copy paste it and the thing disappeared. Anyway, I'll show you the other demo. So this is how react hooks changes the code. So you no longer have class, there is a function and you no longer have the state and calling this.setState. To get count and set count from you state which initializes it to 1 and then it has a button on click it just calls set count and increases the counter. So we'll be able to see this code. Actually if I copy this in my history, this is yeah. So this is the one with class, this is the one with class and you just click on it, it just increases the counter. And this is the one without class. So just count set count and that also increases the count. Let's go back to the presentation. So we will be wondering are classes being removed from react? No, see I wish they did but then because classes confuse both people and machines and there are so many issues with classes, but classes are not being removed from react. If you like classes and happy with it use them, don't use them, but do I need to learn react again? No, because of gradual adoption strategy. So what react team is trying to do, they are just trying to throw and see if hooks get popular. If they get popular it will stick and maybe they will duplicate classes in future. So hooks will provide a more direct API to react components you already know that is prop, state, context, reps and life cycle. So let's learn hooks by replacing redux. There is a redux to do app. If you want to see how to structure, you can click this QR code, but I am going to go through it. So let's see some code because talking is boring, right? So I open the yes code and just increase. So this is our app. This is for showing Redux DevTools. So this is our app. So it calls app, app is in components. It calls add to do. Okay, let me run this first and show you how it looks. So this is our to do app where you add to do. So crack GitHub parents joke, okay? Crack three week from, oh no, it's three week joke and show demo. So I can, I have cracked this too and I am now showing you the demo. So let's go through the code. So this is add to do. This is visible to do list. So if I say active, it shows me the active to do, complete, complete to do, all all to and the footer is this entire thing. So if I go to add to do, you will see that let me, so if you go to add to do, you say that is a form on submit, it gets data which is entered, it dispatches the add to do action. If I go to add to do action, what it does is that it tells that I am calling add to do action type. Add to do ID is the next to do ID, it adds it to one and the text which is get, gets from the add to do component. Then we go to, let's say filter link, okay? So that is add to do in app.js, let's go to footer. In footer, it calls filter links with three links, visibility filter, this is an NM which has three values that is show all, show active and show completed, okay? It calls filter link with the visibility filter, so that if I click this, that is a visibility filter passed. In filter link, this is map set to props, map dispatch to props, it's like very difficult to understand. If you worked on redux, you'll realize. So it calls the link component, in the link component it has a button and on click what it does is in filter link, it calls the set visibility filter action. What set visibility filter action does that it calls the action type set visibility filter with type filter, okay? So let me close this and we'll go to the slide. So what we are going to do now is we are going to learn hooks by replacing redux and if you want to see this GitHub repo, how it is done, you can visit this link. In the read me file, I will explain step by step process on how you can replace redux with react hooks. But in this case, I have a video because you shall never do live coding. If you're giving conference talks, never do live coding. So let's see the video. This video was shot in January of this year, so I'm installing the next versions of react, but now you don't need to do that because react 16.8 has hooks. So what I do is I create a new folder called store, so we are not using redux store anymore and I create store context. Store context is where your context, react context will be stored. So I'll import create context from react. Then I'll just export, I'll just call create context and return the data. You can return some initial state also if you're storing this data somewhere in local state or in the database or something. Then I'll create a store. This will be, I actually call provider, but let's call it store right now. It's a higher order component. So I go to store folder and create store.js and I import react and use reducer. This is the first hook we are using, use reducer from react. So this is supposed to replace the redux provider. So I'm going to export a function because for classes. So that function provider will take one use reducer call and use reducer will take root reducer which you pass to redux and the initial state. How do you get initial state by calling the root reducer? So I store initial state in initial state and return store context.provider. This will create the provider for me and I pass a value to it. That value has a use reducer call which takes the reducer you get from the function which is calling this component that is a reducer. Second thing is initial state, this option. And of course, you're getting children from the call, right? So you're passing those children. So this is the diff if you take a picture. So we have store.js where we create a new store context provider and we have store context for JS where we create new context. So replace redux provider with store. So how do you do this? So now we were calling provider from react redux, right? We don't, we have to call store.store called store context or provider. And we pass the root reducer to that store component. And we don't have to import react redux or redux anymore. So we just remove the react dependency. This is how the diff looks. Now we have to remove redux from individual components. So we saw add to do component which used, which got dispatch from the parent. So we remove connect because we don't use redux anymore. We remove the call to connect. And instead of getting dispatch from the parent, we are going to get dispatch from use context hook. It's a second context, second hook we are using. So we call this, we call use context and pass store context to it. And we'll give you the dispatch function. This is a dispatch function you call. So now you don't get any value from the parent. So use context and pass store context to it. And then, yeah, this is how the code looks. And in filter link, this is how we remove redux. So I told you about MapStateToProps and MapDispatchToProps, right? It is no longer required because we are going to import react and use context from react and we are going to create a new component, which will pass these two values. So what MapStateToProps and MapDispatchToProps does is, MapStateToProps will get the state and pass the prop called active. So if it gets filter prop from the parent, it checks if filter is same as the visibility filter in the state. And onclick will check, onclick will call the set visibility filter operation on set visibility filter action. So here, I just check for if filter is equal to visibility filter. And onclick, I just copy paste what MapDispatchToProps were doing and remove own props because now we are going to get filter and set visibility filter from use context. So we call use context and we get the values for visibility filter and dispatch function. And to use context, you pass the store context. We store store react context. And you remove MapStateToPropsMapDispatchToProps. So these have the code looks. They don't have, no longer have MapStateToProps and MapDispatchToProps. So similarly, same thing needs to be done on visibility list. I'll not go through it. So let's have a demo and see how this looks like. So I escape, I go to VS, I switch to the checkout hooks. So here, we made some changes. So let me show you add to do, which no longer gets dispatch. You get dispatch from use context. Similarly, filter link, which gets visibility filter dispatch from use context. So I just say and start showReduxToDoDemo. Show, sorry, replace Redux with react hooks. And show react hooks demo. So we are done. I've shown you this, I've shown you this, I've shown you this. So you go back to the presentation. So this is very important question, right? Should you switch to react hooks tomorrow morning? No, because debugging support in hooks is available in DevTools, but it is not as good as that of Redux. So let me show you this because it's easy to understand when you see it. So I cancel this, I switch to ReduxDevTools. I say and start, this app is running. I'll open the ReduxDevTools and I tell them show to the right, okay. Now I'll just write, I don't have anything to say, test2, test3, okay. So this is the debugging support for Redux. So you go to this add to do action, right? If you want to jump to this action, you can jump, you can jump to this action. You can skip this action. So debugging support for Redux is amazing. And that is what you're going to miss in hooks. So I go, I could check out hooks and say yarn start. Close this, I'll wait for it to load. No, I just happened because I'm storing data in the local storage. Anyway, so how do we debug here? You go to, so one advantage that you don't have to install ReduxDevTools. ReactDevTools will do the job for you. And I just add test1, test2, test3, okay. And I can see values here. But what if I want to jump to some value or skip some value? I could not find this option, but then I don't think it's there. At least it's not intuitive. So that is what you're going to miss. So debugging support is not good, and middleware is not yet available. So if you use Redux, then you will have used some kind of middleware for like Redux thunk or Redux sagas or Redux observables. That is not available. But developers have welcome React Hooks. You can visit, there were 1600 comments on RFC. So do give it a try in your site projects first. So will React Hooks replace Redux? In one, you came for this answer, right? Okay, and answer is, it depends, I'm sorry. Most of the conference talks which have the title, question mark, right? Answer is it depends. But let's see what is happening. React team is recommending libraries to export their own custom hooks such as useRedux. And ReactRedux since version 7.1.0 supports hooks API and exposes hooks called like useDispatch and useSelector. And even React Router, if you use it, it supports hooks since version 5.1. So React is known for building user interfaces. It is not known for state management. So I'm not sure if React team will try to replace Redux. But then it's exciting time to be in JavaScript world. Thank you for listening. This is my name, and yeah, you're a GitHub repo here. Thanks.