Adding redux-injectors brakes the createStore.apply function

Question

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?

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;
}

score 0 · Accepted Answer · answered May 17 '20 at 15:56

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

Adding redux-injectors brakes the createStore.apply function

1 Answers1