Learning Redux with Puppies! Pt 1. Introduction to Flux and spec for a dog pen

When adding a lot of complexity between components, it’s good to get a correct flow. That’s what Redux was made for. Let’s check it out.

What’s Redux and what does it do?

A nice way to build applications in JavaScript is splitting each part of the application into smaller components. A component is normally composed of a view and a controller. A view renders a model and a controller does the logic for a model. Pure and simple.

Communication between these components is where this gets messy. Some developers will adapt a way for a component to subscribe to another component. We call this a bi-directional flow. This is a way to abstract out the dependencies of other component. A problem occurs when the app grows and many components starts subscribing to a components action. This creates a single point of failure and code that becomes hard to work with.

Redux is a way to manage the application state. It’s based of a programming philosophy called Flux. It explains the underlying need to have a state for your entire stack of components. This is proposed as a way to share the state among all components. This creates a uni-directional flow, as apposed to the bi-directional flow described earlier. You might call it a version of the controllers responsibilities, but for the entire application.

You might’ve seen this flow before. Unidirectional flow. Taken from http://survivejs.com/

In Redux, we have some expressions that you need to be aware of.

  • First and foremost, you have the Store. The Store is where all the data lies.
  • An Action is probably the most self explanatory in the Redux lingo. It describes the things that happen in your application. If a user clicks a button, this dispatches an action.
  • An Action Creator provides simpler way to prepare the action for the controller/reducer.
  • Dispatch is an important method in the Redux library. This triggers an action and runs it against the reducers.
  • Reducers is the layer where the state gets modified. An action happens and gets passed along with some data. We call this data the payload. A reducer will alter the state and return an entirely new state.

Making a dog pen in Redux

Now that we’ve described an architecture, we have to put it into action! When creating something in Redux it’s good to map out the basic features and the overhead of the application. In this series, we’ll be creating a simple dog pen.

  • Adding a dog to the pen.
  • Renaming a dog.
  • Removing a dog from the pen.

And later.

  • A person can walk into the pen.
  • A person can adopt a dog.

Alright! We’re ready to start coding now. We’ll only look at Redux and state management in these examples. So, no views will be made and the state will be displayed in a console. In the next part, we’ll set up the development environment and start coding. Go to part II!

Like what you read? Give Karl Solgård a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.