predictable state container
$(document.body).click(function () {
$('div').each(function (i) {
if (this.style.color !== 'blue') {
this.style.color = 'blue';
} else {
this.style.color = '';
}
});
});
<div>
<div>
state
state
<body>
<div
ng-repeat="item in ctrl.itemList"
ng-style="{color: item.color}"
ng-click="ctrl.toggleColorOf(item)">
</div>
function ctrl() {
this.itemList = [{color: 'blue'}];
this.toggleColorOf = item =>
item.color === '' ? 'blue' : ''
}
view
controller
service
state
state
service
state
service
state
PRINCIPLE OF REDUX #1
ONE STORE TO RULE THEM ALL
ONE STORE TO FIND THEM
ONE STORE TO BRING THEM ALL
AND IN THE DARKNESS BIND THEM
smart component
store
state
smart component
smart component
PRINCIPLE OF REDUX #2
Model – View – Intent
Also in this category: Cycle.js
{
type: 'INCREMENT',
value: 1
}
export function increment(value) {
return {
type: 'INCREMENT',
value
};
}
PRINCIPLE OF REDUX #3
(state, action) => state
0
INCREMENT BY 1
1
export function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + action.value;
default:
return state
}
}
REDUCER
REDUCER
REDUCER
REDUCER
REDUCER
component
interacts with
action
is passed to
reducers
generate a new
state
dispatches an
updates the
import {createStore} from 'redux';
import {counter} from './reducers';
import {increment} from './actions';
const store = createStore(counter);
store.dispatch(increment(1));
store.dispatch(increment(2));
store.getState(); // 3