You Probably Don’t Need Redux

edit: got some great comments below so i’ve added some links to the bottom of the article — Blair

This is your daily reminder to listen to your gut.

Do not believe the hype.

Do not over-optimize.

Do not add libraries because they’re popular.

Are your coworkers throwing around the idea of using redux and you still don’t quite get why? Maybe you’re a senior engineer still getting experienced with React. Or you already glanced at redux and did a WTF at the docs.

This article is written because I was a junior engineer once. I remember the fun of learning react and the pain of learning redux. I still mentor junior-engineers/code-schoolers, and advanced react(redux/routing) is easily the #1 thing that creates the react learning curve. What should we do?

AppState

Start a create-react-app and create a new file called AppState. Its going to hold all your state(data) as you build out your app.

https://github.com/blairanderson/react-no-redux

Lets walk through:

• The constructor sets up the component props, default state, and binds functions.
• function setAppState is a wrapper around setState which allows for potential logging and such.
• render is a normal div that passes state and a callback to the children.

Update your top level render:

https://github.com/blairanderson/react-no-redux

Open your index.js file and wrap your App in the AppState component that you just created!

💥

This is a basic pattern for maintaining state at the top level of your app and passing down a callback for updating it. You can use it right now in any version of react because its just react!

The best part is that it adds clean lines between state logic(inside AppState) and lets you keep your components clean for rendering and basic state.

Here is the code

Here is a demo

Redux Vs Component State… Why?

It’s all about creating a pattern so that you and your coworkers know where to put data(state) as your app grows. Some examples of state:

• AJAX response data(which user is logged in?)
• Is the page loading? has it loaded?
• How many seconds have passed since this component has rendered?

It matters because you WILL want to share data across components and if you don’t have a pattern beforehand, every new component is guaranteed to increase complexity of the overall app.

Movin’ On Up

The answer to sharing state more easily is always “Move your state higher”. Since react renders from the top down, state should be held at the highest level and passed down to children components. It allows you to update in one and see effects in the other.

What is state anyways?

State is a keyword in react components that defines where your app is RIGHT NOW.

Is your kitchen clean or dirty? Its probably dirty, but if you clean it then the state becomes clean! In react components we keep track of state with a built-in function called setState.

Update the state:

//with a function(best)
this.setState(function(prevState, props) {   
  return {dirty: false}; 
});
//or with an object(ok but buggy with big apps)
setState({dirty: false})

Then later in your app you can read the value {this.state.dirty && <div>this kitchen is totally dirty</div>}

So what does redux do? Redux holds your state and gives a pattern for plugging it back into your components at the top level. problem is that it adds a few new concepts that aren’t really necessary unless your app is large and REALLY hurts because nobody follows a single pattern.

Again, I have nothing against Redux. I just don’t want you jumping into it too early because It will confuse and annoy your coworkers if its not necessary!

See also:

Fullstack React: Redux and Why it's Good For You

React Async Example (without Redux)

You’re Still Here?!?!

Read about the new legit react error catching solution:

React V16 New Error Handler (example)