Replacing Redux with ReactN to reduce complexity and bundle size

The Application 0️⃣

The application is a showcase of global state features. On mount, the application fetches a page and stores the response in the global state. On render, a button displays a number from the global state. When the button is pressed, the number increments.

The Redux Application 1️⃣

The Dependencies 👶👶👶

We need three packages to establish our Redux application: redux, which contains the logic to create and interact with the global state; react-redux, which contains React logic and higher-order components for integrating the global state with a React application; and redux-thunk, a Redux middleware for processing asynchronous state modifications.

Initializing the Global State 🎬

To initialize the global state, we use the createStore function from the redux package. To it, we pass the desired reducers and middleware.

Connecting the Components 🚈

In order to connect the components to the state, we must wrap the application in a global state context provider, then wrap each connected component in a higher-order-component that behaves as a global state context consumer.

Reading from and Writing to the Global State 👁‍🗨

With all of that boilerplate out of the way, we can finally use the global state! We access and modify the state through the connected component’s props.

The ReactN Application 2️⃣

Now that we’ve seen the familiar Redux implementation, let’s see how we can decrease the complexity above and turn it into a more readable, more intuitive React application.

The D̶e̶p̶e̶n̶d̶e̶n̶c̶i̶e̶s̶ Dependency 👶

Install the reactn package. There is no asynchronous middleware. ReactN supports Promises out-of-the-box. You can remove the three aforementioned Redux dependencies and sigh in relief as your application drops by 213 dependency files and has a 13% smaller production bundle size when it uses ReactN instead.

Initializing the Global State 🎬

The first of the cumbersome boilerplate, time to initialize the store and establish the reducers. Reducers and actions are optional in ReactN. I only include them here for a fair comparison, as we are using them in Redux. If you find reducers to be too much boilerplate, you are more than welcome to abstain from using them. A reducer-free alternative is provided later.

Connecting the Components 🚈

ReactN does not use higher-order components. To connect your components to the global state, you add one byte to your file.

Reading from and Writing to the Global State 👁‍🗨

How do we use the global state if we didn’t tell it what props we want on our component? With React in mind, ReactN treats the global state as a member variable — exactly as you are used to using with local state’s this.state.

fetchData 🐶

I mentioned how I would handle the fetch data action differently with ReactN, so I will elaborate here. ReactN is not limited to actions and reducers, like Redux. ReactN’s global state member variable is meant to behave exactly like React’s innate local state member variable, and that includes an analogous this.setGlobal method that behaves like this.setState. The setGlobal method has additional functionality of supporting JavaScript Promises.

One Last Comparison 🏁

I wanted to show the two applications, side-by-side, in their completed state, since the above really only covers snippets. The code below would be better served if it were split into multiple files, but the real issue is reading, writing, comprehending, and maintaining this code. This applies not only to you, the reader, but your team, which is often comprised of junior developers.

Before: index.js with Redux 🔴

After: index.js with ReactN 💚

Before: App.js with Redux 🔴

After: App.js with ReactN 💚

The Cold, Hard Fact ⛄

Whether you believe one method is easier to read than another, one thing here is objective. The above application in a production build is 531,736 bytes using ReactN. It’s Redux counterpart is 611,990 bytes — a 15% increase.

Conclusion 🔚

If you want to contribute to this project, it is open-source on GitHub, and I would be absolutely ecstatic for more community feedback. If you want to play around with this project, simply npm install reactn --save or yarn add reactn.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store