Skip to content

Instantly share code, notes, and snippets.

@bleathem
Created January 18, 2018 22:47
Show Gist options
  • Save bleathem/bf6920400574db94685c1c6ad98bcb53 to your computer and use it in GitHub Desktop.
Save bleathem/bf6920400574db94685c1c6ad98bcb53 to your computer and use it in GitHub Desktop.
Sample code to show the sequence in which observable-redux dispatched events are reduced.
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { createEpicMiddleware, combineEpics } from 'redux-observable';
const makeActionCreator = (type, ...argNames) => {
return function (...args) {
console.log('Creating action', type, args[0]);
const action = { type };
argNames.forEach((arg, index) => {
action[argNames[index]] = args[index];
});
return action;
};
}
enum Actions {
ACTION_1 = 'ACTION_1',
ACTION_2 = 'ACTION_2',
ACTION_3 = 'ACTION_3',
ACTION_1B = 'ACTION_1b',
ACTION_2B = 'ACTION_2b',
ACTION_3B = 'ACTION_3b'
}
const dispatchAction1 = makeActionCreator(Actions.ACTION_1, "value");
const dispatchAction2 = makeActionCreator(Actions.ACTION_2, "value");
const dispatchAction3 = makeActionCreator(Actions.ACTION_3, "value");
const dispatchAction1b = makeActionCreator(Actions.ACTION_1B, "value");
const dispatchAction2b = makeActionCreator(Actions.ACTION_2B, "value");
const dispatchAction3b = makeActionCreator(Actions.ACTION_3B, "value");
const testReducer = (state = {}, action) => {
switch (action.type) {
case Actions.ACTION_1:
console.log('Reducing action 1');
return {
...state,
value1: action.value
}
case Actions.ACTION_2:
console.log('Reducing action 2');
return {
...state,
value2: action.value
}
case Actions.ACTION_3:
console.log('Reducing action 3');
return {
...state,
value3: action.value
}
case Actions.ACTION_1B:
console.log('Reducing action 1b');
return {
...state,
value1b: action.value
}
case Actions.ACTION_2B:
console.log('Reducing action 2b');
return {
...state,
value2b: action.value
}
case Actions.ACTION_3B:
console.log('Reducing action 3b');
return {
...state,
value3b: action.value
}
}
return state;
}
const action1Epic = (action$, store) =>
action$.ofType(Actions.ACTION_1)
.mergeMap(action => [
dispatchAction2("From 1"),
dispatchAction3("From 1")
]);
const action2Epic = (action$, store) =>
action$.ofType(Actions.ACTION_2)
.mergeMap(action => [
dispatchAction1b("From 2"),
dispatchAction2b("From 2"),
dispatchAction3b("From 2")
]);
const testEpics = combineEpics(action1Epic, action2Epic);
const epicMiddleware = createEpicMiddleware(testEpics);
const testStore = createStore(
testReducer,
applyMiddleware(epicMiddleware)
);
// Dispatch the first action
testStore.dispatch(dispatchAction1("From the top."));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment