«

React + Redux - Simplified

Ok, so if you're like me you might have taken a long time to come to grips with the whole Redux paradigm and how it works with React.

TL;DR: I explain React and Redux simply in terms you might find easier to understand and get your app happening faster. You'll want the Good Stuff heading.

The Rabbit Hole

My journey began by getting to the point where I hated writing Angular (v1) code and I wanted something clean and "more testable" than I already had.

My hate of Angular (actually probably just me being over maintaining CPresent) really was just me trying to really knuckle down and get into some proper TDD (Test Driven Development). I really felt that angular wasn't decoupled enough to handle it.

So I had heard about React.js a fair while ago when facebook first released it, and since then more and more people seemed to be using it, and there was even a React native thing going on (Seems like they had changed their tune on JS being too slow for apps in the mobile world too [1]).

With a bit more research it seemed that Mocha + React were the way to go. Winning!

Oh wait, but React doesn't have routers and stuff, oh and what is React's equivalent of Angular's services? ARRGGGGHHHH

Yeah so Flux wasn't helpful. I mean it didn't make all that much sense to me when I was reading it. Going back now it seems perfectly reasonable but when I was checking it out, massive cognitive overload.

Then I found redux. Beautiful, simplistic redux.

It was glorious in all its tutorials and documentation. Then I tried to write something in it and my brain just FRIED. Like KFC Chicken.

Turns out, I pretty much understood redux, and kinda didn't know what exactly I needed to know to make it happen in react. So I sat down, wrote what I know and voila! Here it is:

The Good Stuff

State

Ok so time is linear right? Well your app doesn't have to be. But at any point in time, your app could be described as a static thing right?

Well that's all the state is in redux. A snapshot in time of your application, in the form of an Object/Map/Dictionary...

Actions

Actions are not really actions per sé. They're more like the headstone on a tomb. "Dan Holmes, he was a boss programmer. Which might be losely transcribed into css like this:

{
  name: "Dan Holmes"
  description: "He was a boss programmer"
}

In redux though, an action is describing something a little more alive. It's describing how you want to change the state of your application. Sorta Like:

{
  type: "kill_human",
  id: 1
}

If you're familiar with the event/listener world then you can see how this would be similar. In fact that's how I found redux easy to understand. An action is an event that is yet to be emitted.

You could think of it as a command, being written by a general to his army, that was yet to be sent off.

Store

You're doing well. A store is essentially just a big ol' hug around the state of the system. It mainly does three things:

  1. Returns the current state.
  2. Registers a list of subscribers (event listeners) to be invoked later on.
  3. Takes an action and gives it to whatever function needs to know about the action.

Reducers

Aka. Doers, state changers etc. Oh I know, I know. The state is "immutable". Really it's just a matter of whether or not your looking from an eternal perspective and can see time as a string of events, or looking from first person and can only see what's happening right this moment, right now. Now. Now. Now. Haha.

Ok I lost you, I'm sorry.

When an action/event is dispatched/emitted against the store, it triggers a reducer. A reducer is essentially just a simple function which determines what to do with the event it's been given. Whether that be to pass it to another function, or do nothing. The result is that it will either return the state it was given, or the new state.

React Good Stuffs (a.k.a. tips)

Main React Component

Needs to wrap the main App component with the react-redux Provider component and assign the store that's been created elsewhere.

Components which need to dispatch

Any component which needs to know how to dispatch an action can do so by being wrapped in react-redux connect function.

react-redux connect

So you pretty much call connect with a function as the first argument. Every time the store says yo, there's an update, that function is called. Now whatever that function returns (which should be at the very least a plain obj) will be given to the component as properties. Boom.

FYI without any extras, you now have a dispatch prop, which calls dispatch. Boss.

Pretty much should be all that's needed to make react work with redux there...

react bindActionCreators

But in case you don't want to just pass dispatch purely, and decided that the action creators abstraction was worth it, you can use the bindActionCreators() helper from redux to bunch a whole lot together and pass as the second argument to connect which becomes props of the component.

The End

Maybe using my obscure language and random thoughts will help you better understand the React Redux eco system and give you a good head start on what things do and where to start. Apart from that I highly recommend simply going through the tutes on the main Redux site one by one and writing notes as you go. It really helps to clear ones mind.

Share Comment on Twitter