const redux = require('redux');
const createStore = redux.createStore;
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
case 'DOUBLE':
return state * 2;
case 'HALVE':
return state / 2;
default:
return state
}
}
let store = createStore(counter)
store.subscribe(() => console.log(store.getState()))
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })
Above you'll see a basic example using a standard redux-y style flow.
Below now we define the Pine middleware, which allows for events to beget other events. This is similar to elm how Commands can fire other Commands in the Update function.
const combineReducers = redux.combineReducers;
const applyMiddleware = redux.applyMiddleware;
const pine = store => next => action => {
const results = update(action, store.dispatch);
return next(results);
}
const update = (action, dispatch) => {
switch (action.type) {
case 'ASYNC_INCREMENT':
setTimeout(() => {
dispatch({ type: 'INCREMENT' });
dispatch({ type: 'INCREMENT' });
}, 2500);
return action;
default:
return action;
}
}
const todoApp = combineReducers({ counter })
const store2 = createStore(
todoApp,
applyMiddleware(pine)
)
store2.subscribe(() => console.log(store2.getState()))
store2.dispatch({ type: 'ASYNC_INCREMENT' })
store2.dispatch({ type: 'INCREMENT' })
store2.dispatch({ type: 'INCREMENT' })
store2.dispatch({ type: 'DOUBLE' });
store2.dispatch({ type: 'INCREMENT' });
// should be 7
no comments
sign in to comment