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.
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.
- Actions
- Reducers
- 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.