Connecting Redux

[00:00 - 01:09] Connecting Redux. The post page currently reloads when a user submits the comment. Let's try to make it work without reloading. In order to do this, we need some kind of store on the client. For this purpose, we'll use Redux. There is a package called NextReduxRapper that will help us connect Redux with NextEzier. First, let's add the required packages. Yarn, add NextReduxRapper, ReactRedux and types for ReactRedux. We didn't add Redux itself because it is included in dependencies for the NextReduxRapper. However, it requires ReactRed ux as per dependency, so we installed it separately. Configuring the store. Create a new folder, store, and inside of it a new file called index.ts. Here we first need to make the imports. We import store, create, store, combine reducers from Redux. We'll need to import MakeStore and create wrapper from NextReduxRapper.

[01:10 - 01:58] We'll need to define an expert, the state type, expert type state. The state will contain the posts and the comments. For now, let's say that it's type any, post any comments, any , but soon we'll define the reducers and define the types for these sections of our state. So there is going to be a post state that will hold the post that we're commenting and the comments state that will hold the comments for the selected post. Then we'll define a combineReducer, const, combinedReducer. Here we call combineReducers, send in an empty object, but later we will provide the post and comments reducers there. Then we call MakeStore of type MakeStore of type Store of type state.

[01:59 - 02:18] We define it as a function that is going to be calling createStore with combinedReducer. And finally we expert the store itself. Expert, const, store, equals create wrapper of type store of type state. And here we pass MakeStore and options object. We want to set the debug to true.

[02:19 - 02:49] Now let's define the actions and the reducer for the comment state. Still inside of the store folder, create a new file comments.ts. Impert, any action from Redux Impert, hydrate from NextReduxRapper, Impert comment from Shared types and Impert the hydrate action. Hydrate action from hydrate. The hydrate action is going to be defined in the hydrate module. Let's create it. Hydrate.ts.

[02:50 - 03:48] And here we import any action from Redux and Impert hydrate from NextReduxR apper. We expert an interface hydrate action. That extends any action. It will contain only the type field that will have value type of hydrate. Okay, we can get back to the comments. And here we want to expert a new const update comments action equals update comments. We expert an interface update comments action that extends any action. The type here is going to be type of update comments action. And the payload is going to have name comments and type comment array. Expert the type for the comments state comments state equals an array of comment and define the type for comment action.

[03:49 - 04:40] Type comments action equals either hydrate action or update comments action. We have the types for the actions. Let's define the reducer expert const comments equals a function. This function will receive a state argument of type comments state by default is going to be an empty array and an action of type comments action. Inside of this function we're going to add a switch statement switch action type. If the type is hydrate case hydrate then return action payload. If it's there if it exists then return comments otherwise an empty array case update comments action then we return action comments. So we update them with the comments that came from the action payload.

[04:41 - 05:02] And if it's any other action default then we return the state without changing it. The double question mark here is the nullish coalescing operator. It allows us to have a fallback which we do here. So if there is no payload or comments then we'll just use an empty array. All right we have the reducer and the actions for the comments. Let's create the same for the post.

[05:03 - 05:29] Inside of the store folder create new file post TS. Here we start with the actions. First we need the any action from we start with the imports we need the any action from Redux hydrate from next Redux wrapper post and optional types from shared types and hydrate action from the hydrate module. Now we define an expert the const update post action the value is going to be update post.

[05:30 - 11:27] We also want an interface for the update post action type. Expert interface update post action extends any action type is going to be a type of update post action post of type post. After we have that we can define the post state type expert type post state equals optional of type post and the type post action that is going to be a union type of hydrate action and update post action similar to what we had for the comments type post action equals hydrate action or update post action. Now we can move on to the reducer itself expert const post equals a function that receives a state just like all the reducers post state by default is going to be null and the action of type post action here we'll have a switch statement to handle the actions action type case hydrate and we return action payload post or null in case if it's update post action then we return action post and by default we return state all right now we have the reducers and their states so instead of any let's use post state and comments state import them from the relevant modules pass in the reducers to the combined reducers post comments and we also import them from the modules and we're done setting up Redux now we can update the application components to make them actually load the data using Redux now open up tss pages underscore up tss and here we'll wrap our component into with Redux import store from store remove the expert default from the function my up definition and instead we now expert default store with Redux and we wrap my up so instead of the regular my up component we're gonna expert use the default expert to expert the wrapped version now let's update the post page post idtsx in the post component we're not going to receive any props anymore remove the router and instead define the post use selector from type state and post state here we pass in the getter function it will get the post section of the state and just return it import the post state state from the store and use selector from react Redux define the comments comments we're gonna get using the use selector from the comment state comments state imported from the store comments here we destructure the state to get the comments field and we return it all right now instead of the router to show the loader we're gonna use the post so if it doesn't exist then we show loader we want to modify the get server side props because right now when the post page will try to get the comments and the post from the state it's not gonna get anything because there is nothing that puts the post and the comments into the state we have them when we get the server side props so after we got them we need to dispatch their actions to put them to store them in the state so instead of using the regular get server side props let's remove the type from here we're gonna be using store get server side props here we'll need to wrap this whole block into a function that will receive the store as an argument store and then we can format the document all right now we have the post and the comments and we have access to the store so we can call the dispatch method store dispatch and we dispatch an action with type update post action and we pass in the post let's import we do the same with the comments store dispatch update comments action with the comments and we import this action type as we don't use the props now this mechanism is not needed anymore because we used Redux to have access to these values we can change the return statement to return just now and we also should not forget to import the store to be able to use the get server side props now we've changed the post and comments loading mechanism so that we get them from the Redux let's make the comment form work without reloads go to server index.ts scroll to the comments middleware and instead of returning 201 we're gonna return res JSON comments filter and here we'll filter them by the post where post equals the post id now go to the comment form component add the use dispatch import use dispatch from react Redux and the update comments section import update comments section from Tor comments and update the form itself we want to get the dispatch method dispatch equals use dispatch instead of status we now get the whole response object get the comments equals await response JSON we set loading false set value to an empty string set name to an empty string and then if response status equals 200 then we're going instead of reloading the page we'll dispatch a new action with type update comments action and pass in the comments all right now let's try to run the application open any post and let's try to add the comment maximum hmm will it work we press submit and our comment appears in the list of comments for this post