Redux with typescript

Let's see how we use redux with typescript

1. install react typescript app

npx create-react-app typescript-practise  --template typescript

        

1. Make a Components folder and create app.tsx file.

3. Install redux, react-redux, redux-thunk, and Axios.

npm i?redux react-redux axios redux-thunk        

4. make a reducers folder and configure it in a reducer/index.tsx file.

so now we have our basic typescript set with reducer and app component. make sure you don't have any errors in the console.

5. so now make an actions folder and create an index.ts file. note that here and in the reducers directory we create an index.ts file. because we do not require Html code in that.

write the below code in the actions/index.ts file.

Did you notice something? here we do not use many typescripts but typescripts will not give errors. typescript will take the type of payload as ANY . which is not good. so let's fix this. also here FETCH_TODO is static. so something may make a type. so let's create an enum for that.

So create a types.ts file in actions and define fetchTodo there in the enum. so we do not accidentally use this key in a different place and also avoid typos.

We also need to pass API data response type in axios.get<Todo[]> request as generics as shown below. so now if you hover on payload,then it will take type as Todo[] .

But here we send payload ="anything", it will not give an error. typescript inference type as a string. so if we strictly want that payload in dispatch be Todo[] only. then we pass on use of generics here.

So now let's create todoReducer. so make a file in todo in the reducers directory.

Now make changes in the reducers/index.ts file.

If we pass another function by mistake then todoReducer, then it will not give an error. like,

So we need to pass generics in combineReducers, to avoid this type of issue. So make interface StoreState, and pass as generics. another benefit is any developer understands StoreState

So, let's connect our redux with App.tsx . follow some steps as mentioned below.

• import connect function from react-redux
• import fetchTodos and Todo from actions/index.ts.
• import StoreState from the reducer.
• Now we need to connect the component and reducer. so write mapStateToProps which returns todos. so we can access the object.

Listing of todo

Here we will make a button, and if users click on that button, then after todo will be fetched.

• create fetchTodos function which will respond to call fetchTodos from props(redux actions). this function does not take any parameters and returns void.
• make function which renders a list of todo. so the render list function will not take any arguments but will return JSX ELEMENT LIST.

Deleting todo

• create deleteTodo type in action enum

• create an interface for deleteTodo in index.ts of actions.

• Make deleteTodo action. which takes id as an argument and returns the deleteTodo interface. please note, this is not a return function (redux-thunk). so we directly return as an object.

• Add delete case in the reducer. Here we need to type union to use both action fetchTodo and deleteTodo.

• Add deleteTodo in AddProps interface in App.tsx.

• finally call this delete action when the user clicks on the title of the list.

But currently, you will get an error in connect function, because in AppProps fetch too is redux-thunk, and todo will return an object. typescript will think both types is different. so change the type of fetchTodo to Function.

So now, our todo works fine using typescrpit and redux. That's it for the day guys........