Implementation of React-Redux Hooks With Typescript
Join the DZone community and get the full member experience.Join For Free
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
useState, then you're probably good to go.
The Redux hooks APIs provide an alternative to connect HOC and do away with
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
Now, import this component in App.tsx.
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
react-redux to the project.
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).
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:
Also, we'll update the index.tsx file to wrap our App with the Provider and provide the store to the Provider.
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:
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.
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 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:
When can then use
UseSelector to assign name and address state.
Now, we can use
useDispatchto get a dispatch object and create a new instance of
After integrating both state and dispatcher to the component, our file will look something like this:
connectconceptually. 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.
===reference equality checks by default, not shallow equality. To use shallow equality, we can use
Opinions expressed by DZone contributors are their own.