How to use redux with react hooks in react native application

How to Use
Redux with
React Hooks in
React Native
Application
w w w . b a c a n c y t e c h n o l o g y . c o m

The react-redux library has official support
for the Hooks in React as well as React
Native applications to use Redux as a state
management library. With more and more
adoption of React Hooks and its ability to
handle side effects and components, now, it
is regarded as a standard functional
component pattern.
Redux hooks are available since the release
of React version 16.8.x, and in this blog post,
we will explore a structured pattern for
Redux making use of React Native.

To replace the higher-order component
Redux hook API is used, “connect()” with
hooks like “useDispatch” and “useSelector”
as present React-Redux provides 3 hooks:
⦿useSelector():
This can help you replace the
mapStateToProps. The purpose is to extract
the data from the ‘Redux’ store whenever
function component renders.
⦿useDispatch():
A replacement to mapDispatchToProps, it’s
purpose is to return the reference to the
dispatch object.
⦿useStore():
It helps to return the reference that was
wrapped in Redux . It is ideal to use in
specific scenarios, like replacing reducers.

"dependencies": {
"@react-native-community/masked-view":
"0.1.5",
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native":
"https://github.com/expo/react-
native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "~1.5.0",
"react-native-paper": "3.4.0",
"react-native-reanimated": "~1.4.0",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-navigation": "4.0.10",
"react-navigation-stack": "2.0.10",
"react-redux": "7.1.3",
"redux": "4.0.5"
},
Source: Heartbeat
Let’s Start with Installing
Redux

The very next step is to install the
dependencies to use Redux and manage the
state:
yarn add redux react-redux lodash.remove
Here I am going to follow ducks for
directory structure to manage Redux files
as ducks let you have modular reducers in
the application itself. There is no need to
create separate files for types, actions, and
action creators. All of these can be managed
in one modular file, and if it demands to
create more than one reducer, then you can
simply define multiple reducer files.
How to Add Action Types and Creators

While using Redux, the state is
characterized by JS object. It would be best
if you considered an object as ready as it
does not allow you to make changes in the
state. This is the reason you need to take the
help of actions.
Actions are similar to the events in Redux.
To start with
src/ directory
Create subdirectory – Redux
Create a new file - notesApp.js.
Now you have provided an additional ability
to allow users to add notes.
// Action Types
export const ADD_NOTE = 'ADD_NOTE'
export const DELETE_NOTE =
'DELETE_NOTE'

To Create Reducers
Path: src / store /
File: /ducks/example.js
The receiver of the action is addressed as a
reducer; whenever an action takes place,
the state of the application changes and
the app’s state is done by reducers.
Reducer functions based on the previous
and initial state.
Let’s Move Ahead to Add a
Reducer

// import the dependency
import remove from 'lodash.remove'
// reducer
const initialState = []
function notesReducer(state = initialState, action) {
switch (action.type) {
case ADD_NOTE:
return [
...state,
{
id: action.id,
note: action.note
}
]
case DELETE_NOTE:
const deletedNewArray = remove(state, obj => {
return obj.id != action.payload
})
return deletedNewArray
default:
return state
}
}
export default notesReducer
Source: Viblo

Holds application state
Allows access to the state via getState()
Let the state be updated
via dispatch(action).
Provides permission to registers
listeners via subscribe(listener)
Basically, the Redux store is responsible
for the following:
Under the src folder, create a store.js file
and configure it with the Redux store to
define the initialState parameter.
Redux Store

/*
* src/store.js
* No initialState
*/import { createStore, applyMiddleware }
from 'redux';
import thunk from 'redux-thunk';
import rootReducer from
'./reducers/rootReducer';export default
function configureStore() {
return createStore(
rootReducer,
applyMiddleware(thunk)
);
}
Source: Medium

The Redux store is set up, but the
application has no access to it. Using a
provider from React binding react-redux,
the store will be available to every
component in the application. Here I am
going to consider the store and children as
props.
To Create Store

/*
src/index.js
*/import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import configureStore from './store';import
'./index.css';
import App from './App';
import registerServiceWorker from
'./registerServiceWorker';ReactDOM.render
(
< Provider store={configureStore()} >
< App />
< /Provider >,
document.getElementById('root')
);
registerServiceWorker();
Source: Medium

To access state with Redux, use the
useSelector, it is very similar to the
mapStateToProps inside connect(). It
allows you to extract data from the Redux
store state using a selector function.
The significant difference between the
argument and the Hook is the selector will
present any value in return not any object
as a result.
Simply open the ViewNotes.js file.
// ...after rest of the imports
import { useSelector } from 'react-redux'
To Access the Global State

The Hook is only used to perform to
dispatch function from the Redux store.
Simply import it from the react-redux
along with the action creators to dispatch
an action.
import { useSelector, useDispatch } from
'react-redux'
To dispatch an action define the following
statement useSelectorHook:
const dispatch = useDispatch()
Dispatching Actions

const addNote = note =>
dispatch(addnote(note))
const deleteNote = id =>
dispatch(deletenote(id))
FYI, here’s a code snipet of List.Item
< List.Item
title={item.note.noteTitle}
description={item.note.noteValue}
descriptionNumberOfLines={1}
titleStyle={styles.listTitle}
onPress={() => deleteNote(item.id)}
/ >
To trigger these events:

So far, you are good to go with running an
application from the terminal window
executing the command called expo start.
For your reference, here’s a complete
snippet of code.
To Run the Application

How to use redux with react hooks in react native application

The additional hooks such as useDispatch
and useSelector not only eliminates the
need to write ample of boilerplate code but
also provides the additional advantages of
using functional components. To
understand more in detail, please refer to
their official document. If you are planning
to hire React Native developers, with the
relevant skillset who can help you
implement Hooks in your React-Redux
application, then you have landed on the
right page.
We are a globally renowned React Native
development company and can help you
build visually stunning and future-proof
mobile app solutions.
Wrapping Up

How to use redux with react hooks in react native application

More Related Content

What's hot (20)

Similar to How to use redux with react hooks in react native application (20)

More from Katy Slemon (20)

Recently uploaded (20)

How to use redux with react hooks in react native application