Simon de Turck
Web technologist (whatever that means) from Eindhoven, the Netherlands
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
Redux
By Simon de Turck
