From georigami on flickr

My entry file with Redux Saga generally looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import {all} from "redux-saga/effects";

import {
    watchLoginRequest,
    watchLogoutRequest,
    watchCurrentUserRequest,
    watchUpdateProfileRequest
} from "./authSaga";

import {
    watchGetUserList,
    watchGetUser,
    watchAddUser,
    watchUpdateUser,
    watchDeleteUser
} from "./adminSaga";

export default function* rootSaga() {
    yield all([
        watchLoginRequest(),
        watchLogoutRequest(),
        watchCurrentUserRequest(),
        watchUpdateProfileRequest(),
        watchGetUserList(),
        watchGetUser(),
        watchAddUser(),
        watchUpdateUser(),
        watchDeleteUser(),
    ]);
}

As you can see a set of imports and then an array of functions added to the generator function used in my store module. This works fine, but I often find that swapping between a specific sagas file and the rootSagas file to be an unnecessary step prone to error.

While integrating redux-saga an annoying little error may pop up in the console.

1
Uncaught ReferenceError: regeneratorRuntime is not defined

It took a bit of research to figure out why, and it shouldn’t have since the notice is listed in the README for redux-saga. Most browsers do not support ES2015 generators, so require using a polyfill.

I am going to assume usage of the react-slingshot bootstrap as mentioned in a previous post about usable bootstrap with react-slingshot.

Add the import for babel-polyfill prior to importing redux-saga to the src/store/configureStore.js.

1
2
import 'babel-polyfill';
import createSagaMiddleware from 'redux-saga';

Enjoy.

Getting started with React can be a bit daunting, and as with using things like AngularJS I’ve found that using a bootstrap is a great way to start. With that in mind, I’ve chosen the wonderful react-slingshot from @housecor. It contains a demo which can be removed with an npm script and from which we’ll extract what I feel is most useful including: integration with redux, react-router, and redux-thunk.

Most React repositories seem to dispense with build tools and instead use a mixture of npm scripts and webpack to achieve what it needs to achieve. Just recently a new package manager came out to unseat the stalwart in npm, we’re using yarn, please follow the install instructions for your particular environment.