Redux

The predictable state container by Dan Abramov

1. Single source of truth

2. Read-only (immutable)

3. State changes are made with pure functions

The 3 pilars of Redux

1. Single source of truth

Single js object tracks state / state tree

All changes are explicit

2. Read-only (immutable)

State cannot be mutated

Changes to the state result in a new state

Changes are initiated by dispatching messages

3. State changes are made with pure functions (reducers)

Reducers take the current state & an action and returns the new state

Reducers have no side-effects

Reducers don't alter the input

const counter = (state = 0, action) => {
    switch (action.type) {
	case "INCREMENT":
	    return state + 1;
	case "DECREMENT":
	    return state - 1;
        default:
	    return state;
    }
}

array[index] = 'something'; // Mutation!

array.slice(0, index).concat(['something else']).concat(array.slice(index + 1);
[...array.slice(0, index), 'something else', ...array.slice(index + 1)];

object.prop = 'something'; // Mutation!

_.deepCopy(object);
Object.assign({}, object, {prop: 'something'});
{...object, prop:'something'};

array.splice(index, 1); // Mutation!

array.slice(0,index).concat(array.slice(index + 1);
[...array.slice(0, index), ...array.slice(index + 1)];

array.push(itemToAdd); // Mutation!

array.concat([itemToAdd])
[...array, 0]

The Redux store

It holds the app state object
It lets you dispatch actions
You to provide it the reducers