Using Redux template in React Native

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience.

Photo by Safar Safarov on Unsplash

Installation

In order to install the redux in react native. We will install the following packages.

yarn add react-redux redux redux-persist redux-thunk @react-native-community/async-storage

Once you have installed the packages. Create a folder in your app component and name it as a store. Add the following folders and file in the storage component.

1. Actions
2. Reducers
3. index.js

Actions Folder

Add the following code in types.js

export const SAVE_TOKEN = 'SAVE_TOKEN';

Add the following code in the index.js

import { SAVE_TOKEN } from './types';
export const saveToken = (key) => ({
  type: SAVE_TOKEN,
  payload: key
});

Reducers Folder

Add the following code in the index.js

import { SAVE_TOKEN } from '../actions/types';
const initialState = {
 token: ''
};
const Reducer = (state = initialState, action) => {
switch (action.type) {
case SAVE_TOKEN:
 return {
   ...state,
   token: action.payload,
};
default: 
 return state;
}
};
export default Reducer;

Add the following code in Index.js file of Store

import {applyMiddleware, combineReducers, createStore, compose} from 'redux';
import thunk from 'redux-thunk';
import {persistStore, persistReducer} from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';
import Reducer from './reducers';
// Redux Debugger
let composeEnhancer = compose;
if (__DEV__) {
composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}
const Reducers = {
 appData: Reducer
};
const persistConfig = {
 key: 'root',
 storage: AsyncStorage,
 blacklist: ['navigation'], // navigation will not be persisted
 // stateReconciler: autoMergeLevel2,
 // timeout: 100000,
};
const persistedReducer = persistReducer(
 persistConfig,
 combineReducers(Reducers),
);
export const Store = createStore( 
 persistedReducer,composeEnhancer(applyMiddleware(thunk))
);
export const persistor = persistStore(Store);

Final Step

Add the following code in App.js file

import React from 'react';
import {Route} from './src/navigation/routes';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import {Store, persistor} from './src/store';
import {StatusBar} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
const App = () => {
 RNBootSplash.hide();
 return (
  <Provider store={Store}>
   <PersistGate loading={null} persistor={persistor}>
   <StatusBar backgroundColor="#000" barStyle="light-content" /
    <Route />
   </PersistGate>
  </Provider>
);
};
export default App;

Steps to retrieve and store the values in the store in a functional component

import React, {useState, useEffect} from 'react';
import {persistor} from '../store';
import * as wpActions from '../../store/actions';
import {useSelector, useDispatch} from 'react-redux';
const Login = ({navigation}) => {
 const dispatch = useDispatch();
 const [code, setCode] = useState('');
 const details = useSelector((state) => state.appData.details);
 console.log(details);
// Comment this code if not clearing database.
 useEffect(() => {
  persistor.purge;
  console.log('purging database');
 }, []);
 
 const sendToken=()=>{ 
   dispatch(wpActions.saveToken(code))
 }

If you want to set up a new app with Drawer and Stack Navigation along with redux run this command

yarn add @react-native-community/async-storage @react-native-community/masked-view  @react-navigation/drawer @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-responsive-screen react-native-safe-area-context react-native-screens react-native-vector-icons react-redux redux redux-persist redux-thunk

Read my article on Medium regarding Stack Navigation for More info.