Let’s talk Redux… – chelle tuerk – Medium

Let’s talk Redux…  #redux #react #reactjs

  • Here’s a short and sweet breakdown of Redux in an attempt to retain the simplicity.First, and probably best, about Redux is that there is only one store keeping track of all the important data.
  • The store keeps track of all states throughout time, meaning you can rollback to a certain state in your app at any given point and the state is exactly as it was in that point in time.
  • That is, if the object has remained immutable throughout.Next, we wrap that whole dang app in one provider component which listens to the store.
  • ‘Smart’ components are aware of the framework and pulls properties off the store and then passes the data to ‘dumb’ components.Actions are then dispatched with a payload of all the data.The reducers have the ability to all react off of the same action — or not.
  • Neato.The main benefit of Redux is to simplify data with one store handling all state within the app.Boom.

Here we are, able to understand Redux at a high level, but once 10 components, and their containers, and their reducers, annnnnd their state all come into play things tend to get a bit fishy. Here’s…

@ReactDOM: Let’s talk Redux… #redux #react #reactjs

Here we are, able to understand Redux at a high level, but once 10 components, and their containers, and their reducers, annnnnd their state all come into play things tend to get a bit fishy. Here’s a short and sweet breakdown of Redux in an attempt to retain the simplicity.

First, and probably best, about Redux is that there is only one store keeping track of all the important data. The store is merely a big javascript object that should never be mutated, but new versions are created — an immutable JavaScript object. The store keeps track of all states throughout time, meaning you can rollback to a certain state in your app at any given point and the state is exactly as it was in that point in time. That is, if the object has remained immutable throughout.

Next, we wrap that whole dang app in one provider component which listens to the store. When the store changes the provider re-renders the entire app.

‘Smart’ components are aware of the framework and pulls properties off the store and then passes the data to ‘dumb’ components.

Actions are then dispatched with a payload of all the data.

The reducers have the ability to all react off of the same action — or not. They’re completely independent of one another. Neato.

The main benefit of Redux is to simplify data with one store handling all state within the app.

Boom. Short and sweet.

Let’s talk Redux… – chelle tuerk – Medium