DEV Community

loading...
Cover image for Redux... A Bigger Hammer is Not Always Better.

Redux... A Bigger Hammer is Not Always Better.

saramccombs profile image Sara McCombs (she/her) Updated on ・2 min read
Photo by niklas_hamann on Unsplash

I took a lot of shop classes in school. It gave me the skills and confidence to weld, build just about anything out of wood, and operate a variety of tools. But it also taught me that we should always use the appropriate tool for every task. (Thanks Walt Disney and Primitive Pete.)

The same sentiment is true with state management. 

What is State?

Let's recap, Redux is a state management tool. But what exactly is state?

In the simplest terms, state is a JavaScript object. This object will have a set of keys and values that reference the condition, or "state", of something at a particular point and time.

 

const initalState = {
  captains: [],
  starships: [],
  addModal: {
    open: false
  }
}
Enter fullscreen mode Exit fullscreen mode

Altering this object's properties will automatically update wherever used on the frontend. This "reactivity" is how the name "React" came about.

<div className={this.state.addModal.open ? '' : 'hidden'}>
  Awesome Star Trek stuff goes here...
</div>
Enter fullscreen mode Exit fullscreen mode

State Management

React apps are made of many components, in many separate files, with each component typically having its own state, known as local state.

If a component is nested inside of another component, the nested component becomes a child component. If the child component requires a state value that lives in its parent component, that value passes down to the child through props. 

This "passing down" through props works well for small React apps that have clear parent/child relationships. 

So where does Redux come in? 

Redux is a package that creates a global state shared among React components with no need for a parent/child relationship. 

Sounds amazing, right? Global state should be the default setup in every React app. No. Absolutely not.

Redux is a tool. Our jobs as developers is to determine the most appropriate tool for the job and use it. 

Redux is very much a "big hammer", a 20lb sledge of sorts, and would absolutely be overkill in some situations. You'd most likely end up with more headaches than when you started and is why it isn't the first hammer we reach for.

Local state is your normal household claw hammer and will work 99% of the time. Even when a much larger hammer is better suited to the job, a household claw hammer is still effective... albeit with a bit more effort. 

So when do we need that Redux "hammer"?

We reach for our Redux "hammer" when one of two problems occur:

  1. Using the same state through components that don't have a parent/child relationship, which results in:
      - A lot of redundancy
      - Additional calls to the server

  2. Passing state down through more than two components creates a chain of components that rely upon each other and isn't scalable. 

In these situations, the benefits of using Redux outweigh the additional setup and additional "moving parts" of accessing and updating state. 

So, don't be too hasty to grab that bigger hammer when the "smaller" one will do the job with a lot less to manage. Always use the appropriate tool for the job. 

Discussion (8)

pic
Editor guide
Collapse
chipp972 profile image
Nicolas Pierre-Charles

Good article summarizing state and redux use cases in React.
I would suggest just another use case where I find Redux to be very usefull :

When a component triggers an update in another component that is not his child.

For example when you click on a button and a dialog appears on the screen. Without Redux you would have to pass the function openModal through the entire App. With Redux you just have to import an actionCreator and useDispatch from react-redux.

Collapse
mbcod3 profile image
Muhammad Bilal

What about react context?

Collapse
misterhtmlcss profile image
Roger K.

Actually Redux uses the React Context API, so im many ways you are using a similar tool, but not as that's obviously an over simplification on my part.

What's really a big value of Redux over just the Context API specifically is the tooling around Redux. Your ability to debug with Redux is orders of magnitude better over just Context API. So for complex state management and complex relationship issues it can be very useful to choose Redux over Context API.

However if your state complexity is lower, but you still need the global state then Context API is a really good option over Redux and similarly local state would be extra hard work if you had lots of non-parent/child state management relationships.

In my opinion or even possibly more recently I feel the relationship or dichotomy between these three choices has become much more argumentative with Hooks inclusion of useReduce. It's so powerful and it makes these decisions sometimes feel more like art than science sometimes.

Collapse
stereoplegic profile image
Mike Bybee • Edited

Aside from the flux pattern of state management (if that's your thing), the biggest advantages to Redux are being able to plug in middleware (though it's Redux's own fault that you need Thunk or Saga middleware just to perform async actions) and being able to use selectors rather than directly relying on the entire context and suffering unnecessary rerenders any time it changes.

However, there are ways to accomplish all of these things without the boilerplate of Redux. Recoil is very promising, but I can't recommend it yet.

Collapse
mozeloper profile image
OJEI MOSES

So do u mean we shouldn't use redux all the time

Collapse
misterhtmlcss profile image
Roger K.

That wasn't my take away. I think as Sara said it's a big hammer and while it's a useful tool, it's not for all situations. Lots of people initiate their apps with Redux or without, but it's something that requires more thought and I really felt that was actually well articulated in the article myself.

Collapse
albertopdrf profile image
Alberto Pérez de Rada Fiol

That was a nice summary, thanks for sharing!

Up until now I've found out that React Context suits all my needs regarding global state, so I haven't actually had to use Redux yet!

Collapse
mindyourlifeguide profile image
Bohdan Petrov

What about effector? It does an excellent job of managing the state without having redux issues.