Migrate from react-redux 5 to 6 on: Solution for dynamically injecting sagas and reducers

[iamgiolaga]

Hi,
I spent the last weekend figuring out how to migrate from react-redux 5.0.0 to 7.2.5 without breaking the dynamic injection of sagas and reducers.
I don't know if my use case was too specific, but I didn't find a solution online; since I was enough lucky to get it, I put it here hoping that this can be helpful for someone else:
the problem was caused by the visibility change that redux store had through the connected components during this migration.
My code was of the form:

// some code

const store = configureStore(); // function that creates a redux store

ReactDOM.render(
    <Provider store={store}>
      <Router history={history}>
        <Switch>
          <Route path="/redirect-login" component={RedirectLogin}/>
          <Route path="/login" component={Login}/>
          <Route path="/sign-up"  component={SignUp}/>
          <Route path="/forgot-password" component={ForgotPassword}/>
          <Route path="/confirm-forgot-password" component={ConfirmForgotPassword}/>
          {indexRoutes.map((prop, key) => (
            <PrivateRoute path={prop.path} component={prop.component} key={key} />
          ))}
        </Switch>
      </Router>
    </Provider>
  ,
  document.getElementById("root")
);

and in my connected component, let's say Login, I had

// some code

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withSaga = injectSaga({ key: "auth", saga });
const withReducer = injectReducer({ key: "auth", reducer });

export default compose(
  withSaga,
  withReducer,
  withConnect,
  withStyles(loginStyle)
)(Login);

in particular the problem was related to withSaga and withReducer, respectively with injectSaga and injectReducer calls, where in both cases I was able to access the redux store through this.context.store in order to get the injectors.
After upgrading to react-redux 7.2.5 (and in general, this occurs after 6.0.0), this kind of access doesn't work anymore and returns undefined, because context is an empty object.
The solution for me was to

1. create and save a custom context through React.createContext and pass the store as parameter
2. export this const

// some code

const store = configureStore(); // function that creates a redux store

// start of new code
const CustomContext = React.createContext(store);
export default CustomContext;
// end of new code

ReactDOM.render(
    <Provider store={store}>
      <Router history={history}>
        <Switch>
          <Route path="/redirect-login" component={RedirectLogin}/>
          <Route path="/login" component={Login}/>
          <Route path="/sign-up"  component={SignUp} />
          <Route path="/forgot-password" component={ForgotPassword} />
          <Route
            path="/confirm-forgot-password"
            component={ConfirmForgotPassword}
          />
          {indexRoutes.map((prop, key) => (
            <PrivateRoute path={prop.path} component={prop.component} key={key} />
          ))}
        </Switch>
      </Router>
    </Provider>
  ,
  document.getElementById("root")
);

3. import CustomContext where I previously called this.context.store
4. replace this.context.store with CustomContext._currentValue

I am not a react-redux expert, so I could have made some trivial mistakes, but I hope that this works for you too!

[markerikson]

Yeah, that's the switch from React's legacy context API ( this.context) to the modern React.createContext() API. Use of legacy context was always an internal implementation detail and not part of our public API.

As of 7.1, we now officially document a useStore() hook and how to access the store, so you shouldn't need to create your own custom context:

https://react-redux.js.org/using-react-redux/accessing-store#using-the-usestore-hook

Also, accessing CustomContext._currentValue is not a documented way to use a React context instance, and if it does work it's purely by accident.

[iamgiolaga]

Thanks for the reply, I tried to follow the documentation but I am missing something...
Given that my store is configured in a custom way at the beginning, am I wrong or useStore is something purely delegated to components? What if I need to access redux store from a file of this form

export default ({ key, saga, mode }) => WrappedComponent => {
  class InjectSaga extends React.Component {
    static WrappedComponent = WrappedComponent;
    // static contextTypes = {
    //   store: PropTypes.object.isRequired
    // };
    static displayName = `withSaga(${WrappedComponent.displayName ||
      WrappedComponent.name ||
      'Component'})`;

    UNSAFE_componentWillMount() {
      const { injectSaga } = this.injectors;
      injectSaga(key, { saga, mode }, this.props);
    }

    componentWillUnmount() {
      const { ejectSaga } = this.injectors;
        
      ejectSaga(key);
    }
    
    injectors = getInjectors(store);
    //injectors = getInjectors(CustomContext._currentValue); // the way that works by accident
    //injectors = getInjectors(this.context.store); // the legacy way

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return hoistNonReactStatics(InjectSaga, WrappedComponent);
};

specifically at the line injectors = getInjectors(store)?
I managed to export the store from here

//some code

const store = configureStore();
export default store;

ReactDOM.render(
    <Provider store={store}>
      <Router history={history}>
        <Switch>
          <Route path="/redirect-login" component={RedirectLogin}/>
          <Route path="/login" component={Login}/>
          <Route path="/sign-up"  component={SignUp} />
          <Route path="/forgot-password" component={ForgotPassword} />
          <Route
            path="/confirm-forgot-password"
            component={ConfirmForgotPassword}
          />
          {indexRoutes.map((prop, key) => (
            <PrivateRoute path={prop.path} component={prop.component} key={key} />
          ))}
        </Switch>
      </Router>
    </Provider>
  ,
  document.getElementById("root")
);

confirming that I don't need a custom context and it works also like this but I am currently never able to take advantage of useStore.

[markerikson]

There's a couple issues with that InjectSaga component as currently written:

• It's a class component, and you should generally prefer writing function components instead
• It's using the UNSAFE_componentWillMount method

I would suggest rewriting that as a function component and doing the injection in useLayoutEffect instead.

As for accessing the store outside the component tree, see:

https://redux.js.org/faq/code-structure#how-can-i-use-the-redux-store-in-non-component-files