React Redux 5.x to 7.x - Brief Notes and Changes To Take Into Account

Understanding the core concepts behind Redux is something quite important to study as Front-End web engineers. Now a days, quite a few React web applications use this JS library for managing the global state of a website, not to mention other frontend technologies like Angular and Vue as well. To understand Redux structure and how it works overall will open your mind to its purpose and usage in web development.

---

Table of Contents

📌Introduction
📌Main changes between react-redux@5.0.7 and react-redux@7.2.2
📌Analysis

📍FIRST - this.context.store is not supported anymore
📍SECOND - withRef and forwardRef
📍THIRD - be aware of store prop

📌Conclusions

---

Introduction

Redux will help you manage the global state of your app, however if you are working with React it’s very probable you will end up using React Redux, which is the official React UI bindings layer for Redux.

Not long ago, I had the opportunity to start working on a medium tenure complex React 16.X application with lots of intrinsic business logic on its code. Due to the age of the app there was a mixture of old and new React practices such as: class based components using lifecycle functions, functional components, hooks and so on.

While working on the Front-End side of things, I noticed the versions of some npm packages were outdated. So I decided to upgrade the react-redux version to the most latest version possible in order to leverage the usage of Redux with Hooks, which is a common recent practice when working with Redux. During this process, I found different kinds of errors that broke the web application and were stopping me to achieve what I wanted at the moment.

After doing a research on the web, I was not able to find a consistent list of changes between version 5.X and version 7.X of React Redux. So after fixing the errors, this is the list of changes I made:

Main changes between react-redux@5.0.7 and react-redux@7.2.2

1. this.context.store is not supported anymore within Classed Based Components since the store can be accessed via the useStore() hook
2. withRef occurrences most be replaced with forwardRef
3. The store needs to be passed as a prop to App wrappers like <ConnectedRouter/>

Note: when updating npm packages it’s important to check the peer dependencies of the package you’re planning to upgrade to make sure the packages installed in your project will work well together. Read More

It’s always a good idea to go check the main repo of the npm package to understand the changes made with each release. Here is a link to react-redux 7.x release notes.

Analysis

Ok, so this is getting interesting. 🔍 Let’s take a closer look to each of the bullets.

FIRST - this.context.store is not supported anymore

In the case of the app I was working on, there were several classed based components that were using this.context.store to pass the entire Redux state as a prop to child components using Redux Form. Redux Form uncontrolled forms are not wrapped by the react-redux provider by default.

To fix this I created a custom functional component used as a wrapper to pass the global store to class based components. The reason of this was, of course, because we are not allowed to use hooks within class based components:

interface ComponentTypes { 
  Component: React.ReactNode | React.ReactElement | JSX.Element; 
}
export const withReduxStoreHOC = ({ Component }: ComponentTypes) => {
  return (props: any) => {
    const store = useStore();
    return <Component store={store} {...props} />;
  };
};

So then, I replaced this.context.store with this.props.store and everything worked well ⭐️

Check this link for react typescript references.

Note: this.context.store I would say was not the best practice, since one can use Selectors to select a specific peace of the redux store. Nevertheless, it was being used to pass the store to uncontrolled forms (redux-forms) that are not wrapped by the react-redux provider by default.

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
)

SECOND - withRef and forwardRef

This bullet is pretty self explanatory, I just changed withRef occurrences with forwardRef and everything was good. If you want to do further research on this topic, check the following link: How to use Refs on Connected Components

THIRD - be aware of store prop

Be aware of your React App wrappers such as <ConnectedRouter/>. For this case the store needed to be passed to <ConnectedRouter/> as a prop.

import { Provider } from 'react-redux';
import store, { history} from './store';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter store={store} history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
)

---

Conclusions

1. When updating npm packages it’s important to check the peer dependencies of the package you’re planning to upgrade.
2. Unless you’re starting a new react app, it’s very likely that you will find old projects which will have older versions of packages.

---

Note: I hope this article is useful to you! Take into account the setup of your app might have differences, so keep in mind you should always do a thorough testing of your application and consult the Official Docs.

If you have used Redux before, you and I will not argue about the fact that the complexity may become a little big when it comes to manage complex applications, nevertheless I most say the package itself is powerful and cool stuff can be built with it. 😃

Currently, Redux Toolkit (a new big update to Redux) is now intended to be the standard way to manage Redux logic. It’s approach makes it easier to manage Redux and to say “good bye” to old Redux concerns.

Checkout this interesting link about the history of React Redux History.

Happy Coding! 🤓💻