Redux Learning

From Dan Abramov’s first course:

3 Principles of Redux:

  1. Everything that changes in your app including data & UI state is contained in a single object, called state or state tree.
  2. State tree is read only (Immutable / Cannot change). To change it, you need to dispatch an action: Plain JavaScript object & must have “type” property that describes the action.
  3. To describe the state mutation, write a pure function, reducer : that takes the previous state of the app & the action being dispatched, and that returns the next state of the app.

Pure function: No side effect. Do not modify the original value passed through.

Avoid Array Mutaions: Use concat(), slice(), and … spread, Do not use push() or pop()

let arr = [0,1,2];
arr.concat([3]); // Same as 
[...arr, 3]
const index = 1;
arr.slice(0, index).concat(arr.slice(index + 1)); // Same as
[...arr.slice(0, index), ...arr.slice(index + 1)];

Object.assign() or … spread to not modify the original todo object.

const toggleTodo = (todo) => {
return Object.assign({}, todo, {
completed: !todo.completed
// Or ES2016 way
const toggleTodo = (todo) => {
return {
completed: !todo.completed

Check the following great note for the Dan Abramov’s first course:

Dan Abramov’s second course:

Code for the second course:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.