{{announcement.body}}
{{announcement.title}}

Implementation of React-Redux Hooks With Typescript

DZone 's Guide to

Implementation of React-Redux Hooks With Typescript

In this article, we discuss how to use Redux-React hooks to dive even deeper into the functional options that React offers.

· Web Dev Zone ·
Free Resource

This article is a continuation of my previous article. If you are new to hooks and have directly arrived here, then I would suggest you to first check out that first article and then come here. In that way, you'll be able to understand everything in this article clearly.

If you know about the basics of hooks in React, like useEffect or useState, then you're probably good to go.

The Redux hooks APIs provide an alternative to connect HOC and do away with mapStateToProps and mapDispatchToProps, and I must say, the Redux hooks API provides a much cleaner way of doing that.

Now, without going too much into theory, let's deep dive into some code. To start, let's create a new component file src/components/ReduxHooksComponent.tsx, with two input fields and a submit button.

Create a Normal Functional component

TypeScript
 







Now, import this component in App.tsx.

TypeScript


Pretty simple, right? After running the code, it should render a component with two inputs and a submit button.

Setting Up the Store, Actions, and Reducers

First, add redux and react-redux to the project. 

TypeScript


Create two files, src/store/index.ts and src/store/root-reducer.ts.

Let’s start creating each and every component of the root reducer (actions, states, and reducers).

TypeScript


Now, we have a simple reducer that does nothing but return the initial state. Let’s create a store using this rootReducer, so our src/store/index.ts will look like:

TypeScript


Also, we'll update the index.tsx file to wrap our App with the Provider and provide the store to the Provider.

TypeScript


That’s all. Well, you won’t see any visible changes in the browser, but eventually, you have successfully integrated Redux into your React code.

Now, let’s create some actions. Update the root-reducer.ts file so with the following code:

TypeScript


Pretty easy, yes! We have just returned an updated version of the state with new values, as per the actions' suggestions.

Now, let's create a Dispatcher in the same file.

TypeScript


We are done with all the dispatchers, actions, and store (basically, our entire Redux setup). All we need to do is dispatch actions from components and use values from the store.

Using Dispatcher and Store in Components via Hooks

Redux hooks provide two main hooks, useSelector and  useDispatch.

useSelector gives access to the entire store object, and we can select only what we are interested in.

useDispatch give access to dispatch, which will be used to create the Dispatcher object of RootDispatcher and then dispatch events to update state.

Let’s create an interface of all the properties we are interested in accessing from the store:

TypeScript


When can then use UseSelector to assign name and address state.

TypeScript


Now, we can use useDispatch to get a dispatch object and create a new instance of RootDispatcher.

TypeScript


After integrating both state and dispatcher to the component, our file will look something like this:

TypeScript

Note: The selector is approximately equivalent to the mapStateToProps argument to connect conceptually. The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function component renders. useSelector() will also subscribe to the Redux store and run your selector whenever an action is dispatched. useSelector() uses strict === reference equality checks by default, not shallow equality. To use shallow equality, we can use shallowEqual from react-redux

So, our selector code would look something like this: 
TypeScript

Topics:
hooks api ,react ,redux ,useDispatch ,useState ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}