Create separate root reducer for Storybook etc.

Author: jessepinho

react-native-expo/.storybook/preview.tsx

@@ -1,26 +1,31 @@
+import { configureStore } from '@reduxjs/toolkit';
 import { DripsyProvider } from 'dripsy';
 import dripsyTheme from '../utils/dripsyTheme';
 import PraxI18nProvider from '../components/PraxI18nProvider';
+import rootReducer from '../store/rootReducer';
 import type { Preview } from '@storybook/react';
 import React from 'react';
-import ReduxProvider from '../components/ReduxProvider';
+
 /**
  * Ideally, we'd use `<FontProvider />` in the root decorator to provide fonts
  * to Storybook. But that caused weird import issues. So for now, we'll just add
  * an `@font-face` CSS file to make our fonts work.
  */
 import './fonts.css';
+import { Provider } from 'react-redux';
+
+const mockStore = configureStore({ reducer: rootReducer });
 
 const preview: Preview = {
   decorators: [
     Story => (
-      <ReduxProvider>
-        <PraxI18nProvider>
+      <PraxI18nProvider>
+        <Provider store={mockStore}>
           <DripsyProvider theme={dripsyTheme}>
             <Story />
           </DripsyProvider>
-        </PraxI18nProvider>
-      </ReduxProvider>
+        </Provider>
+      </PraxI18nProvider>
     ),
   ],
   parameters: {

react-native-expo/store/index.ts

@@ -1,20 +1,8 @@
 import createSecureStore from 'redux-persist-expo-securestore';
 import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer } from 'redux-persist';
-import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { configureStore } from '@reduxjs/toolkit';
 
-import balances from './balances';
-import depositFlow from './depositFlow';
-import portfolioScreen from './portfolioScreen';
-import secureStore from './secureStore';
-import transactions from './transactions';
-
-const rootReducer = combineReducers({
-  balances,
-  depositFlow,
-  portfolioScreen,
-  secureStore,
-  transactions,
-});
+import rootReducer from './rootReducer';
 
 const store = configureStore({
   reducer: persistReducer(

react-native-expo/store/rootReducer.ts

@@ -0,0 +1,23 @@
+import { combineReducers } from '@reduxjs/toolkit';
+
+import balances from './balances';
+import depositFlow from './depositFlow';
+import portfolioScreen from './portfolioScreen';
+import secureStore from './secureStore';
+import transactions from './transactions';
+
+/**
+ * The root reducer for our Redux store. Exported as its own constant (rather
+ * than defining it inline in the store) so that it can be used independently of
+ * the app store in settings like tests and Storybook, which don't work well
+ * with e.g., `redux-persist`.
+ */
+const rootReducer = combineReducers({
+  balances,
+  depositFlow,
+  portfolioScreen,
+  secureStore,
+  transactions,
+});
+
+export default rootReducer;