The Ultimate Manager: Redux I

Hey there! Let's learn Redux together.

This is my attempt at learning Redux. I learn best by researching a topic and then immediately writing about it. (Ahem! This is my English Literature + Education background speaking.) So, follow along and let's try to learn Redux together.

What is Redux?

Simply, Redux is a state management library. Redux exemplifies the Single Source of Truth principle. Redux works to take an application's state (and all associated logic) and move it outside of the application into a single location.

Well, why does Redux do this? What is the point?

Good question. Five minutes ago, I could not really wrap my head around it either. So, by taking all the state and moving it into said, single location, any of an application's components can access state.

This is important because as an application grows, it may have many, many components and all those component may need to access or manipulate state!

By the way, what is the Single Source of Truth principle?

The Single Source of Truth practices the method of structuring data in a way that allows "everyone" to use that data. In storing state outside of the application with Redux, all components have access to the state and its logic. Whereas before, there was a definitive need to individually declare state per component and call to pass state from component to component.

Where (or what) is this Single Location where state is stored?

Redux stores all of the necessary data surrounding state from an application into a JavaScript object. Remember that this object, however, is separate from our application. It is on the outside! This allows for any component to grab any part of the data it may need.

How do we connect Redux to an application?

To make this data (the state) available to any components, we can wrap our components in the Redux object. We call this object, the store.

Here is an example of what the stored state may look like:

state = {
  person: {
    name: 'Adriana',
    hometown: 'NYC'
  },
  interests: [
    {
      name: 'pokemon',
      type: 'game'
    },
    {
      name: 'game of thrones',
      type:'tv show'
    },
    {
     name: 'cooking',
     type: 'hobby'
    }
  ]
} 

As we can see, it is a simple JS object. As applications get more complex, this JS object will also. However, at its root, the store displays the simple characteristics of a simple JS object: keys and values!

Quick Recap

• Redux = state management.
• Redux is a JS library.
• Redux stores data in a JS object (the store).
• Redux portrays the Single Source of Truth principle.
• A single state container allows any component to access data.
• Redux can be used with frontend frameworks, like React or Angular.
• JS objects have key and values.

Thank you for reading along...

🌲 Please leave any comments or questions below! I would love to keep learning with you! 🌲

🌲 Check out my next post on Redux here!🌲