Created
January 18, 2018 22:47
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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