You Don’t Even Need React-Redux and Redux Thunk

Using context to use Redux in our React app without React-Redux or Thunk

Nguyễn Quyết
Jul 19 · 4 min read

When you’re working with React and Redux, everyone will think of React-Redux (to connect Redux with the React application) and Redux Thunk.

Redux Thunk handles async actions and some use sagas, but let’s ignore it for now. In this post, I will only focus on Thunk. However, how can we use the Redux store in the React app without React-Redux?

The answer is context.

If you’re not familiar with context, please have a look at the React documentation.

Before showing you how to use context to connect Redux to the React app, I will show you the advantage of doing so.

  1. Don’t need to install an extra library in your app.
  2. Make your component code shorter and easy to read.
  3. Reduce the extra learning curve for React-Redux.

Number 1 is obvious, I don’t think I need to explain that.

Number 2: Here’s some code for a component that is using React-Redux, and a component that is not.

See! The component on the left only takes 15 lines of code, while the component on the right (which uses React-Redux) takes 32 lines of code, twice as much as the other.

Number 3: (Reduce the extra learning curve for React-Redux). I still remember when I first worked with React (two-three years ago).

The things called mapStateToProps and mapDispatchToProps took a while for me to get comfortable using it. Not to mention something called the higher-order function “connect”, that confuses junior developers.

I’m sure that there is something confusing you right now. Where did this come from?

const {state, actions} = useContext(AppContext)

Before I explain what it is and where it comes from, I will show you how to use context to connect Redux to your React app.

There it is. On the left is App.js (the root component of my React app), a place to set up context.

You will see that our context value contains appState from the store and all the actions (imported from the index.js file on the left).

Notice that we have to subscribe the app state to the Redux store, so that it gets notified every time the Redux store changes. Don’t forget to unsubscribe it when the app unmounts.

Then, we’ll wrap all the content of the app component in the context provider. That way, other components in our React app are able to access the application state and actions, as described above, in the product’s component.

One thing to notice here, in each action, instead of returning an object that contains type and payload, we will dispatch it directly in an action function. This is because we’re not using React-Redux, so we have to call dispatch in an action function.

That’s all. For me, this is a really simple way of combining React and Redux without the need of React-Redux. Writing the component will be more native, with React syntax.

No more mapDispatch, mapState, and other connecting things.

Another thing is, with this approach, we don’t event need Redux Thunk to handle the async action. We just call them directly in an action and dispatch an action when the async action is resolved.


Conclusion

Disclaimer

React context will cause all its consumers to re-render every time the provider changes value and badly affects performance.

Solution

Tips for solving this issue:

You should architect your app with containers (known as consumers in this context) and components (those don’t care about the Redux store, they only depend on props).

Containers always render the component, not the DOM, and the component always renders the DOM and only re-renders when its props or state are changed.

Containers can re-render as many times as they want. We don’t mind, because that doesn’t actually re-rending the DOM so it won’t affect our app’s performance.

Code

I’ve put the reference code in this GitHub repo.

Thanks for reading!

Better Programming

Advice for programmers.

Nguyễn Quyết

Written by

javascrip lover

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade