day 195 — code 365

Sun 26 Jun 2016

Redux

Continued with Dan Abramov’s tutorial on Redux.

He uses a test suite called Expect:

https://github.com/mjackson/expect, which I’ve found helpful to become more familiar with TDD.

One of the tutorials looked at refactoring the reducer function, using ES6's default argument. But I wasn’t able to run this:

$ node counter.js

Threw a SyntaxError (unexpected token), which I assumed was because node didn’t understand ES6. But this didn’t make sense, because I’ve seen ES6/7 used in Node programs… which is when I realised that I wasn’t using Babel to transpile my JS into ES5.

But then I realised that I could change the version of Node I was running. So, using n, a node version manager, I changed to v6.2.2, and — voila! — my JS was understood by Node!

Had trouble with this piece of code:

const render = () => {
  ReactDOM.render(
    <Counter value={ myStore.getState() }/>,
    document.getElementById('root');
  )
};

I thought the issue was with JSX not being understood, so I went and installed Babel using Webpack.

It was only then that I realised that it was the ; that was causing the problems!

One problem with using Babel is that the compiled JS doesn’t have any global variables, so I can’t do this:

myStore.getState();

However, when I use CodePen, with React and Babel, that works…?! I wonder how they make that work?

I learnt more about the return statement in JS.

We can return anything!

There is some slight difference in how some functions are written, with respect to what is returned….

/**** Objects ****/

var returnVarObj = function() {
  x = { name: 'Tom' };
  return x;
};
// Object {name: "Tom"}

var returnObj = function() {
  return {
    name: 'Sally'
  };
};
// Object {name: "Sally"}

The Redux tutorials by Dan Abramov are awesome. He is very good at explaining the concepts behind Redux.

I feel a lot more comfortable writing pure functions, writing tests using Expect, and the relationship between reducers, actions, and state.

I also feel a bit more comfortable writing reducers — pure functions that take the current state and an action, and return the next state — leaving the current state and action untouched.