Redux: replaceReducer not working when upgrading to version 4 of redux

[sabbiu]

What is new in redux v4?

My code was working with redux v3.x.
But, when upgrading with redux v4, replaceReducer didn't update the reducers.

Where can I know about how to use replaceReducer with redux v4?

Meanwhile, I will be using redux v3.x

This is the implementation BTW, https://github.com/sabbiu/dynamic-reducers-for-react

[markerikson]

The implementation for replaceReducer is still here at https://github.com/reactjs/redux/blob/4a215fb74167675485df7d6d2fb1197a184cc461/src/createStore.js#L210-L217, and we've got tests that are all presumably passing . What behavior are you seeing? What do you mean by "didn't update the reducers" ?

[sabbiu]

In my store, https://github.com/sabbiu/dynamic-reducers-for-react/blob/master/src/store.js, I am adding a function to store.

store.asyncReducer = {};
store.injectReducer = (key, reducer) => {
    store.asyncReducers[key] = reducer;
    store.replaceReducer(createReducer(store.asyncReducers));
    // redux v3.x gives me new store
    // redux v4 doesn't.. it gives the same old store
    console.log(store.getState());
};

This is my function for createReducer

import { combineReducers } from "redux";
import { reducer as formReducer } from "redux-form";
import PostsReducer from "./reducer_posts";

const createReducer = asyncReducers =>
  combineReducers({
    posts: PostsReducer,
    form: formReducer,
    ...asyncReducers
  });

export default createReducer;

After dynamic loading of component, I pass new reducers as such,

import searchReducer from "../reducers/reducer_search";
import { withReducer } from "../withReducer";

class Search extends Component {
    ...
}

export default withReducer("search", searchReducer)(Search);

This is withReducer function

import React from "react";
import { object } from "prop-types";

const withReducer = (key, reducer) => WrappedComponent => {
  const Extended = (props, context) => {
    context.store.injectReducer(key, reducer);
    return <WrappedComponent {...props} />;
  };

  Extended.contextTypes = { store: object };

  return Extended;
};

export { withReducer };

[joshjg]

This is related to Redux DevTools. Disabling the extension fixes this issue for me. Still investigating.

[markerikson]

I just got a report of this behavior from someone working through my Educative "Practical Redux" course:

Reducers hmr is not working with redux 4. the tutorial uses an older version, but this may be worth mentioning

@joshjg : what did you see in relation to the Redux DevTools ?

[gaearon]

My guess is this might be related to the change in the action for replacing. Maybe DevTools handles INIT action specially.

[timdorr]

Yup

[markerikson]

That's interesting, because https://github.com/reduxjs/redux-devtools/issues/391 and https://github.com/zalmoxisus/redux-devtools-instrument/pull/17 make it look like there were changes already done to handle this.

[ChristianDavis]

Dev tools was our issue as well after upgrading to v4, it's really tough to troubleshoot. Just implementing an action logger middleware till a release from either team

export const loggerMiddleware = store => next => action => {
  console.group(action.type);  // eslint-disable-line no-console
  console.info('dispatching', action);  // eslint-disable-line no-console
  const result = next(action);
  // OMIT toJS if you're not using immutable
  console.log('next state', store.getState().toJS()); // eslint-disable-line no-console
  console.groupEnd(action.type); // eslint-disable-line no-console
  return result;
};

[krailler]

I have same issue; i have uninstall extension, and problem persist... replaceReducer still bugged.

[greena13]

redux-devtools-instrument is waiting for this PR to be merged in.