Merge pull request #1 from saurabhshah23/feat-blacklist

added redux persist blacklist example
saurabhshah23 · Jun 14, 2021 · e213994 · e213994
2 parents b49d89d + 4e5fb02
commit e213994
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 7 deletions.
diff --git a/App.js b/App.js
@@ -14,10 +14,16 @@ import {
   StatusBar,
   View,
 } from 'react-native';
-import {DefaultTheme, Provider as PaperProvider} from 'react-native-paper';
+import {
+  DefaultTheme,
+  Provider as PaperProvider,
+  Divider,
+} from 'react-native-paper';
 import {Counter} from './src/components/Counter';
 import {CounterRedux} from './src/components/CounterRedux';
+import {Age} from './src/components/Age';
 import {AppTitle} from './src/components/AppTitle';
+import {Person} from './src/components/Person';
 // REDUX
 import store, {persistor} from './src/redux/store';
 import {Provider as ReduxProvider} from 'react-redux';
@@ -31,8 +37,15 @@ const MainMarkup = () => (
     <ScrollView contentInsetAdjustmentBehavior="automatic">
       <View>
         <AppTitle />
+        <Divider style={{marginVertical: 10}} />
         <Counter />
+        <Divider style={{marginVertical: 10}} />
         <CounterRedux />
+        <Divider style={{marginVertical: 10}} />
+        <Person />
+        <Divider style={{marginVertical: 10}} />
+        <Age />
+        <Divider style={{marginVertical: 10}} />
       </View>
     </ScrollView>
   </SafeAreaView>

diff --git a/src/components/Age.js b/src/components/Age.js
@@ -0,0 +1,37 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {Button, Text, TextInput, useTheme} from 'react-native-paper';
+import {useDispatch, useSelector} from 'react-redux';
+import {addStep} from '../redux/ageSlice';
+
+export const Age = () => {
+  const theme = useTheme();
+  // REDUX
+  const count = useSelector(state => state.age.value);
+  const dispatch = useDispatch();
+
+  return (
+    <>
+      <View>
+        <View style={{margin: 5}}>
+          <Text style={{color: theme.colors.primary, fontSize: 20}}>
+            Age Component (blacklist): {count}
+          </Text>
+          <Text style={{color: theme.colors.text, fontSize: 20}}>
+            This value is blacklisted in our store's persistConfig, thus age
+            won't persist.
+          </Text>
+        </View>
+        <View style={{margin: 5}}>
+          <TextInput
+            mode="outlined"
+            label="Your age"
+            keyboardType="numeric"
+            value={count}
+            onChangeText={num => dispatch(addStep(num))}
+          />
+        </View>
+      </View>
+    </>
+  );
+};
diff --git a/src/components/Person.js b/src/components/Person.js
@@ -0,0 +1,33 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {Button, Text, TextInput, useTheme} from 'react-native-paper';
+import {useDispatch, useSelector} from 'react-redux';
+import {rename} from '../redux/personSlice';
+
+export const Person = () => {
+  const theme = useTheme();
+  // REDUX
+  const count = useSelector(state => state.person.value);
+  const dispatch = useDispatch();
+
+  return (
+    <>
+      <View>
+        <View style={{flexDirection: 'row', margin: 5}}>
+          <Text style={{color: theme.colors.primary, fontSize: 20}}>
+            Person Component: {count}
+          </Text>
+        </View>
+        <View style={{margin: 5}}>
+          <TextInput
+            mode="outlined"
+            label="Your name"
+            placeholder="Full name"
+            value={count}
+            onChangeText={text => dispatch(rename(text))}
+          />
+        </View>
+      </View>
+    </>
+  );
+};
diff --git a/src/redux/ageSlice.js b/src/redux/ageSlice.js
@@ -0,0 +1,17 @@
+import {createSlice} from '@reduxjs/toolkit';
+
+export const ageSlice = createSlice({
+  name: 'age',
+  initialState: {
+    value: '0',
+  },
+  reducers: {
+    addStep: (state, action) => {
+      state.value = parseInt(action.payload ? action.payload : 0).toString();
+    },
+  },
+});
+
+// ACTIONS export
+export const {addStep} = ageSlice.actions;
+export default ageSlice.reducer;
diff --git a/src/redux/personSlice.js b/src/redux/personSlice.js
@@ -0,0 +1,17 @@
+import {createSlice} from '@reduxjs/toolkit';
+
+export const personSlice = createSlice({
+  name: 'person',
+  initialState: {
+    value: '',
+  },
+  reducers: {
+    rename: (state, action) => {
+      state.value = action.payload ? action.payload : '';
+    },
+  },
+});
+
+// ACTIONS export
+export const {rename} = personSlice.actions;
+export default personSlice.reducer;
diff --git a/src/redux/store.js b/src/redux/store.js
@@ -10,22 +10,38 @@
 // REDUX-PERSIST TRIAL
 import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';
 import counterReducer from './counterSlice';
+import ageReducer from './ageSlice';
+import personReducer from './personSlice';
 // REDUX-PERSIST
 // import storage from 'redux-persist/lib/storage';
 import {combineReducers} from 'redux';
-import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist';
+import {
+  FLUSH,
+  PAUSE,
+  PERSIST,
+  persistReducer,
+  persistStore,
+  PURGE,
+  REGISTER,
+  REHYDRATE,
+} from 'redux-persist';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
+const rootReducer = combineReducers({
+  person: personReducer,
+  counter: counterReducer,
+  age: ageReducer,
+});
+
 // persist config obj
+// blacklist a store attribute using it's reducer name. Blacklisted attributes will not persist. (I did not find a way to blacklist specific values)
 const persistConfig = {
   key: 'root',
   version: 1,
   storage: AsyncStorage,
+  blacklist: ['age'], //blacklisting a store attribute name, will not persist that store attribute.
 };
 
-const rootReducer = combineReducers({
-  counter: counterReducer,
-});
 const persistedReducer = persistReducer(persistConfig, rootReducer);
 
 // const store = configureStore({
@@ -39,7 +55,7 @@ const store = configureStore({
       ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
     },
   }),
-})
+});
 
 export const persistor = persistStore(store);
-export default store;
+export default store;