Search code examples
reactjsreact-reduxredux-sagareact-boilerplate

Adding redux-injectors brakes the createStore.apply function


I am trying to add the library redux-injectors from react-boilerplate in my project. However, I get the issue in the image below. My file configureStore is presented below, you can also find it in this repository: https://github.com/guifeliper/example-redux-injectors

What I can do to have the redux-injectors working, I always get this error when I try to apply the library, it seems that my middleware is not in the correct format. Do you have any clue about it?

CreateStore apply is not a function

function createReducer(injectedReducers = {}) {
  const rootReducer = combineReducers({
    ...injectedReducers,
    // other non-injected reducers can go here...
  });

  return rootReducer
}         

export default function testingConfigureStore(preloadedState = {}) {
  const sagaMiddleware = createSagaMiddleware();
  const runSaga = sagaMiddleware.run;
  const injectorMiddleware = createInjectorsEnhancer({
    createReducer,
    runSaga,
  });

  const middlewares = [injectorMiddleware]; // loggerMiddleware
  const middlewareEnhancer = composeWithDevTools(
    applyMiddleware(...middlewares)
  );

  const enhancers = [middlewareEnhancer];
  const composedEnhancers = compose(...enhancers);

  const store = createStore(createReducer(), preloadedState, composedEnhancers);

  return store;
}

Solution

  • The final solution was the following:

    const staticReducers = {
      default: defaultReducer,
    }
    
    function createReducer(asyncReducers) {
      return combineReducers({
        ...staticReducers,
        ...asyncReducers
      })
    }
    
    export default () => {
      let composeEnhancers = compose;
      const sagaMiddleware = createSagaMiddleware();
      const runSaga = sagaMiddleware.run;
    
      // If Redux Dev Tools and Saga Dev Tools Extensions are installed, enable them
      /* istanbul ignore next */
      if (process.env.NODE_ENV !== 'production' && typeof window === 'object') {
        /* eslint-disable no-underscore-dangle */
        if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)
        composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
      }
    
      const injectEnhancer = createInjectorsEnhancer({
        createReducer,
        runSaga,
      })
    
      const store = createStore(
        createReducer(),
        composeEnhancers(
          applyMiddleware(sagaMiddleware),
          injectEnhancer
        )
      );
    
      store.asyncReducers = {};
    
      return store;
    };
    

    Check the CreateStore, where I added the applyMiddleware and InjectEnhancer together. I decided to add a full version in the github as I didn't find any online. https://github.com/guifeliper/example-redux-injectors