React Native + Redux Tool kit + AsyncStorage

shrey vijayvargiya
3 min readMay 17

3 steps to add redux with a redux toolkit and async storage in a react-native application

Photo by Ion (Ivan) Sipilov on Unsplash

Under the Hood

The story begins when I am developing a non-custodial wallet app and web3 mobile app using react-native.

Once the user creates an account or wallet he/she can view all the wallets and addresses and check the balance.

After creating an account I want to store wallets and async storage as we will not be saving wallets in the database.

Tech Stack

And since I am using react-native so redux will be the state management.

But redux now provides the latest or upgrade way to write actions and reducers called slice, so I’ll be using slice.

  • React
  • React Native
  • Redux Toolkit
  • Redux Persist
  • AsyncStorage

Redux persists helps to persist the reducer states and for that, it uses async storage in react-native just like local storage in react

Installing Packages

  • react
  • react-native
  • react-redux
  • redux-persists
  • @react-native-async-storage/async-storage

Creating Reducer

The Redux toolkit now provides an easy way to write reducers and actions in the same method.

Below is the code

import {createSlice} from '@reduxjs/toolkit';

const initialState = {
wallet: [
walletAddress: 'zxcvbnm',
balance: 100,
walletAddress: 'asdfghjkl',
balance: 300,
walletAddress: 'qwertyuiop',
balance: 400,
activeWallet: null,
const walletSlice = createSlice({
name: 'userWallet',
reducers: {
addWallet: (state, action) => {
return {...state, wallet: action.payload};
addActiveWallet: (state, action) => {
return {...state, activeWallet: action.payload};
export const {addWallet, addActiveWallet} = walletSlice.actions;
export const reducer = walletSlice.reducer;
shrey vijayvargiya