Redux like Dan Abramov

The following is from Upstate Interactive’s, Peter B. Smith.

Go farther, go further, go harder.

Is that not

why we came,

and if not

then why bother?

-Shawn Carter

We all want more, each any every one of us. At the end of this post you’ll want more. And next week, you’ll get it. To get it check back here exactly 7 days from now.

This is a post-like document with multiple diverging paths provided by linked related posts. All diverging links exist only as children of this post.

This is about Redux.

You clicked the link? You know who Dan Abramov is.

You know who Dan Abramov is? You know Redux.

You know Redux? Why are you reading this?

Here’s Why!

We know that writing components with React is good. We know that using Redux is a thing to do that makes React more good. Do you know the beautiful, clear, direct way of building out the Redux? Do you know clearly where to begin, where to go next, and where to finish?

Let’s think about that.

Redux has a number of crucial interlocking components. Reducers. Actions. Tests. Middleware. Action Creators. Selectors. Store. States.

Redux has a number of crucial concepts, idioms, and syntaxes (sin taxes as well). Immutability. ES6 array spread operators. ES6 Object destructuring (not a real word). ES6 Parenthesized Object literal return statements. ES7 object spread operators. ES6 Arrow functions. Switch statements. Functions that return functions that return functions (no, that repetition is not a slip of the keyboard).

Maybe you’re in the ES6 world, but if you’re not then you have a steep learning curve. Maybe you’re a functional programmer, but if you’re not then you have a steep learning curve. Maybe you’re familiar with React, but if you’re not then you have a steep learning curve.

With Redux, you could be diving into an ocean of new-ness. That’s not dissimilar from many libraries, from many packages, programming languages, and concepts. The unique feature of Redux however is that it’s creator is a very enthusiastic (though monotone) evangelist, teacher, and guide. He has two tutorial series that take you from no ducks to Redux in about two hours run-time. However, those series are dense and on occasion the concepts are so obscure that Egghead.io’s editors, who wrote the transcripts for the tutorial, can’t even transcribe the words right.

So this post exists to clarify Dan Abramov’s Redux methodology, supplement your existing Redux knowledge, and if you don’t have any Redux knowledge, to be your companion for learning the tool.

Getting Started

I’m sat here at a computer with a 27 inch monitor, its maybe too big for the desk I’m sitting at, and certainly it’s a bit obnoxious. I am used to a 13.3 inch screen.

This 27 inch monster may not last long…

Anyway, let’s get the dependencies:

1. Make a git repo.
2. npm init

Now that you’ve started your repo and have your package.json you are ready to npm install all of the development dependencies for Redux.

They are…

--save-dev babel-core babel-preset-es2015 babel-plugin-transform-object-rest-spread babel-register webpack webpack-dev-middleware expect mocha redux-logger redux-devtools deep-freeze nock

Put an asterisk on mocha because it’s best that you install mocha globally. (Mocha is for testing).

npm install -g mocha

And now for the non-development dependencies

--save redux redux-thunk normalizr

Now that you have knowledge of your dependencies, I want you to know about the way to write the code.

This is the whole point, right here. To write a big app in Redux, go in order from the beginning. It’s the same as walking. To go from point A to point B as fast and cleanly as possible go in a straight line.

First get your files and folders in Redux-Shape. Once you’ve done that write an action creator. Then write a reducer. Then write an async action creator. Finally, repeat. (clickity, click, click, click all of those links)

Sometime when you’re doing your first action creators and reducers configure a store. (clickity click)

Getting Done

Once you can go as far as making an async action creator you’ll think about what you want to do with all of this and you’ll have more questions about what’s happening. Like, whats a thunk? How does all of this connect with React? No, seriously, what about React?

Those are topics for another day.