Skip to content

Instantly share code, notes, and snippets.

@abstractmachines
Last active March 22, 2020 21:15
Show Gist options
  • Save abstractmachines/180c062794f70e75603e477e53006c02 to your computer and use it in GitHub Desktop.
Save abstractmachines/180c062794f70e75603e477e53006c02 to your computer and use it in GitHub Desktop.
Repo upgrading: Dummy sagas + test w/ thunks
/* To upgrade a repo from using only thunks, to using sagas and thunks,
1. Create a dummy saga
2. Add in Saga middleware to store configuration, and start/run sagas from store config
3. Test sagas (generators with generator.next() { value: someValue, done: false } until { ... done: true }
4. Since thunks and sagas can live together in the same repo, you can now move forward with handling async side effects
with new code by using sagas (and being able to test them), and slowly migrate your legacy thunks over to sagas over time.
*/
// 1. rootSaga.js
import { all, call } from 'redux-saga/effects';
import 'regenerator-runtime/runtime'; // Justification: https://github.com/redux-saga/redux-saga/issues/280
function sagaStub() {
return console.log('Dummy saga here ...');
}
function* dummySaga() {
const dummyReturn = yield call(sagaStub);
return dummyReturn;
}
export default function* rootSaga() {
try {
yield all([
dummySaga(),
]);
} catch (e) {
console.error(e);
}
}
export { dummySaga, sagaStub };
// 2. Store configuration
// thunk stuff here ...
// 2a. then add the Saga middleware:
import createSagaMiddleware from 'redux-saga';
import rootSaga from '<path>/rootSaga';
const sagaMiddleware = createSagaMiddleware();
// 2b. there will be some thunk middleware; add in sagaMiddleware to the end of that array. e.g.
const middleware = [ thunk, routerMiddleware(history), createLogger(), otherStuffForThunks, sagaMiddleware ]
// 2c. Make sure that middleware, with your sagaMiddleware, is in the createStore() function ...
// 2d. Start your sagas.
sagaMiddleware.run(rootSaga);
// RESULT: This will just log a 'Dummy saga here ...' to Chrome devtools/Console when you npm start/run your app.
// It's just a dummy saga; it's not hooked into any actions, watching or listening for actions etc.
// 3. sagas-test.js (Enzyme, Jest)
import { call } from 'redux-saga/effects';
import { dummySaga, sagaStub } from './rootSaga';
describe('<path>/rootSaga.js', () => {
describe('dummySaga', () => {
it('should use call saga effect to ret console log', () => {
const generator = dummySaga();
const received = generator.next().value;
const expected = call(sagaStub);
expect(received).toEqual(expected);
});
it('should return done after a single yield is completed', () => {
const generator = dummySaga();
generator.next();
const next = generator.next();
expect(next.done).toEqual(true);
});
it('should return false for generator not done, after a single yield', () => {
const generator = dummySaga();
generator.next();
const next = generator.next();
expect(next.done).not.toEqual(false);
});
});
});
// Next step: have your sagas listen to actions!
@abstractmachines
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment