update: introduce redux-injectors

app/App.js

@@ -7,18 +7,14 @@ import React from 'react';
 import { YellowBox } from 'react-native';
 import { enableScreens } from 'react-native-screens';
 import { Provider } from 'react-redux';
-import configureStore from './configureStore';
-import rootSaga from './sagas/index';
+import store from './configureStore';
 
 import RootStackScreen from './containers/App';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
 enableScreens();
 
-const initialState = {};
-const store = configureStore(initialState, rootSaga);
-
 if (__DEV__) {
   import('./ReactotronConfig').then(() => console.log('Reactotron Configured'));
 }

app/configureStore.js

@@ -1,47 +1,53 @@
 /**
  * Create the store with dynamic reducers
  */
-
-import { createStore, applyMiddleware } from 'redux';
-import { composeWithDevTools } from 'redux-devtools-extension';
+import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
+import { createInjectorsEnhancer } from 'redux-injectors'
 import { createPhoenixChannelMiddleware } from '@trixta/phoenix-to-redux';
 import Reactotron from './ReactotronConfig';
 import createSagaMiddleware from 'redux-saga';
 import createReducer from './reducers';
-const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
-
-export default function configureStore(initialState = {}, rootSaga) {
-  let composeEnhancers = composeWithDevTools;
+export function configureAppStore(initialState = {}) {
   // 1. Reactotron sagaMonitor
   const sagaMonitor = Reactotron.createSagaMonitor();
   const reduxSagaMonitorOptions = __DEV__ ? { sagaMonitor } : {};
-
+  const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
   const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
-
+  const { run: runSaga } = sagaMiddleware;
   // Create the store with two middleWares
   // 1. sagaMiddleware: Makes redux-sagas work
   // 2. phoenixChannelMiddleWare: integrates phoenix channels with redux
-  const middleWares = [sagaMiddleware, phoenixChannelMiddleWare];
+  const middlewares = [phoenixChannelMiddleWare, sagaMiddleware];
 
-  const enhancers = [applyMiddleware(...middleWares)];
+  const enhancers = [
+    createInjectorsEnhancer({
+      createReducer,
+      runSaga,
+    }),
+  ];
 
   if (__DEV__) {
     enhancers.push(Reactotron.createEnhancer());
   }
-  const store = createStore(createReducer(), initialState, composeEnhancers(...enhancers));
-  // Extensions
-  // Kick off the root saga
-  sagaMiddleware.run(rootSaga);
-  store.injectedReducers = {}; // Reducer registry
-  store.injectedSagas = {}; // Saga registry
-
-  //Make reducers hot reloadable, see http://mxs.is/googmo
-  /* istanbul ignore next */
-  if (module.hot) {
-    module.hot.accept('./reducers', () => {
-      store.replaceReducer(createReducer(store.injectedReducers));
-    });
-  }
+  const store = configureStore({
+    preloadedState: initialState,
+    reducer: createReducer(),
+    middleware: [
+      ...getDefaultMiddleware({
+        thunk: false,
+        immutableCheck: {
+          ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
+        },
+        serializableCheck: false,
+      }),
+      ...middlewares,
+    ],
+    devTools: process.env.NODE_ENV !== 'production',
+    enhancers,
+  });
 
   return store;
 }
+
+const store = configureAppStore({});
+export default store;

app/containers/App/index.js

@@ -39,6 +39,8 @@ import { navigationRef, isMountedRef } from '../../navigators/RootNavigation';
 import DrawerSettingsItem from '../../components/common/DrawerSettingsItem';
 import { fontConfig } from '../../theme/Fonts';
 import { setLocalStorageItem, getLocalStorageItem } from '../../utils/helpers';
+import { useInjectSaga, SagaInjectionModes } from 'redux-injectors';
+import saga from './saga';
 
 const RootStack = createStackNavigator();
 const AppDrawer = createDrawerNavigator();
@@ -75,6 +77,7 @@ function AppDrawerContent({ dispatchSignOut, setTheme, theme, progress, ...rest
 }
 
 function RootStackScreen({ dispatch, currentSession, dispatchSignOut }) {
+  useInjectSaga({ key: 'rootScreen', saga, mode: SagaInjectionModes.DAEMON });
   const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
   const [theme, setTheme] = React.useState(DefaultTheme);
   const dispatchCheckForToken = React.useCallback(() => {

app/containers/App/saga.js

@@ -126,9 +126,7 @@ export function* channelPushErrorSaga({ error }) {
  * @param channel
  * @returns {IterableIterator<*>}
  */
-export function* handleChannelJoinSaga(data) {
-  console.info('handleChannelJoinSaga', data);
-}
+export function* handleChannelJoinSaga(data) {}
 
 export default function* rootScreenSaga() {
   yield takeLatest(CHECK_FOR_AUTHENTICATION_TOKEN, checkForTokenSaga);

app/containers/HomeScreen/index.js

@@ -19,10 +19,11 @@ import { changeUsername } from './actions';
 import { loadRepos } from '../App/actions';
 import reducer from './reducer';
 import SimpleList from '../../components/common/SimpleList';
-import { useInjectReducer } from '../../utils/injectReducer';
 import { Colors } from '../../theme';
 import LoadingStatusContainer from '../../components/common/LoadingStatusContainer';
 import { LOADING_STATUS } from './constants';
+import { useInjectReducer, useInjectSaga } from 'redux-injectors';
+import saga from './saga';
 
 export function HomeScreen({
   username,
@@ -33,6 +34,7 @@ export function HomeScreen({
   dispatchChangeUsername,
 }) {
   useInjectReducer({ key: 'homeScreen', reducer });
+  useInjectSaga({ key: 'homeScreen', saga });
   return (
     <View style={styles.container}>
       <Header

app/containers/LoginScreen/index.js

@@ -15,12 +15,13 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import styles from './LoginScreenStyle';
-import { useInjectReducer } from '../../utils/injectReducer';
+import { useInjectReducer, useInjectSaga } from 'redux-injectors';
 import { makeSelectIsLoggingIn, makeSelectSuccess } from './selectors';
 import reducer from './reducer';
 import { defaultAction, requestAuthentication } from './actions';
 import SnackBarMessage from '../../components/common/SnackBarMessage';
 import { makeSelectError } from '../App/selectors';
+import saga from './saga';
 
 export function LoginScreen({
   dispatchRequestAuthentication,
@@ -32,6 +33,7 @@ export function LoginScreen({
   theme,
 }) {
   useInjectReducer({ key: 'loginScreen', reducer });
+  useInjectSaga({ key: 'loginScreen', saga });
   const { control, handleSubmit, errors } = useForm();
   const { colors } = theme;
   return (

app/containers/PhoenixLoginScreen/index.js

@@ -13,7 +13,7 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { compose } from 'redux';
 import styles from './PhoenixLoginScreenStyle';
-import { useInjectReducer } from '../../utils/injectReducer';
+import { useInjectReducer, useInjectSaga } from 'redux-injectors';
 import reducer from './reducer';
 import { Controller, useForm } from 'react-hook-form';
 import SnackBarMessage from '../../components/common/SnackBarMessage';
@@ -22,6 +22,7 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 import { makeSelectIsLoggingIn, makeSelectSuccess } from './selectors';
 import { makeSelectError } from '../App/selectors';
 import { defaultAction, requestAuthentication } from './actions';
+import saga from './saga';
 
 export function PhoenixLoginScreen({
   dispatchRequestAuthentication,
@@ -33,6 +34,7 @@ export function PhoenixLoginScreen({
   theme,
 }) {
   useInjectReducer({ key: 'phoenixLoginScreen', reducer });
+  useInjectSaga({ key: 'phoenixLoginScreen', saga });
   const { control, handleSubmit, errors } = useForm();
   const { colors } = theme;
   return (

app/utils/checkStore.js

@@ -10,7 +10,8 @@ export default function checkStore(store) {
     subscribe: isFunction,
     getState: isFunction,
     replaceReducer: isFunction,
-    //runSaga: isFunction,
+    runSaga: isFunction,
+    createReducer: isFunction,
     injectedReducers: isObject,
     injectedSagas: isObject,
   };

internals/generators/container/index.js.hbs

@@ -23,16 +23,22 @@ import { compose } from 'redux';
 import { Helpers } from '../../theme';
 import styles from './{{properCase name}}Style';
 {{#if wantActionsAndReducer}}
-import { useInjectReducer } from '../../utils/injectReducer'
+import { useInjectReducer, useInjectSaga } from 'redux-injectors';
 import makeSelect{{properCase name}} from './selectors';
 import reducer from './reducer';
 {{/if}}
+{{#if wantSaga}}
+import saga from './saga';
+{{/if}}
 
 export function {{ properCase name }}({ navigation, theme }) {
   const { colors } = theme;
   {{#if wantActionsAndReducer}}
   useInjectReducer({ key: '{{ camelCase name }}', reducer });
   {{/if}}
+  {{#if wantSaga}}
+  useInjectSaga({ key: '{{ camelCase name }}', saga });
+  {{/if}}
   return (
     <View style={[Helpers.fillRowCenter, styles.container]}>
          <Text>This is your {{ properCase name }} Container</Text>

package.json

@@ -30,7 +30,8 @@
     "@react-navigation/material-top-tabs": "^5.2.16",
     "@react-navigation/native": "^5.7.3",
     "@react-navigation/stack": "^5.9.0",
-    "@trixta/phoenix-to-redux": "3.2.0-beta.0",
+    "@reduxjs/toolkit": "^1.5.0",
+    "@trixta/phoenix-to-redux": "3.4.2-beta.0",
     "chalk": "2.4.2",
     "hoist-non-react-statics": "3.3.0",
     "immer": "3.0.0",
@@ -53,6 +54,7 @@
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
+    "redux-injectors": "^1.3.0",
     "redux-saga": "^1.0.2",
     "reselect": "^4.0.0"
   },