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

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?

  • 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

What is state anyways?

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.

Amazon Manufacturer’s Representative @ https://www.AndersonAssociates.net/

Amazon Manufacturer’s Representative @ https://www.AndersonAssociates.net/