Using Redux-Saga for Handling Side Effects

1
Using Redux-Saga for Handling Side Effects
Igor Nesterenko
Lead Software Engineer
17.08.2018

2
Agenda
1. Problem
2. Solutions
3. redux-saga
4. Basic Concepts
5. Advanced Concepts
6. Unit Testing
7. Recommendations
8. Loose Coupled System
9. Summary
10.Future Reading

4
Problem
1. Side-effects are roots of errors and mistrust
• Async (aka concurrency) is hard
2. A program without side effects is useless
3. React and redux don’t solve that all issue

6
Solutions
1. Custom redux middleware
2. redux-thunk (action creator)
3. redux-saga (saga)
4. redux-loop (reducer)

8
redux-saga
1. Origins of Saga Pattern
2. The Process Manager Pattern
3. redux-saga

10
Origins of Saga Pattern
Saga is a failure management pattern
● T - transaction
● C - compensation action

11
The Process Manager Pattern

12
The Process Manager
Sagas
ES6 generators
Saga Monitor
redux middleware
Redux Action

13
Confusions around saga pattern
1. Saga is a failure management pattern
2. redux-saga is an alternative side effect model for Redux apps

15
Terms
1. Effect - is a single, atomic predefined instruction or command
(POJO)
2. Saga - collection of effects, realized in form of ES6 generator
3. Saga Middleware - redux middleware to execute sagas
4. Effect Creator - function to create effect objects
5. Channels - queues for actions
6. Helper and Untils - helper functions for day to day tasks, factory
function to wrap external IO or event channels

16
Effect and Effect Creator
put({type: 'INCREMENT'}) // => { PUT: {type:
'INCREMENT'} }
call(delay, 1000) // => { CALL: {fn:
delay, args: [1000]}}

17
Effect Creators
● take
● put
● call, apply
● fork, spawn
● cancel, canceled
● select

18
Saga Example
// Our worker Saga: will perform the async increment task
export function* incrementAsync() {
yield delay(1000)
yield put({ type: 'INCREMENT' })
}

19
Setup Saga
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(helloSaga)
const action = type => store.dispatch({type})

20
Synchronous Like Code
function* fetchProducts() {
try {
const products = yield call(Api.fetch, '/products')
yield put({ type: 'PRODUCTS_RECEIVED', products })
}
catch(error) {
yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
} finally {
if (yield cancelled())
yield put({ type: 'PRODUCTS_REQUEST_FAILED', new Error('Canceled')})
}
}

21
Pull Future Action
function* loginFlow() {
while (true) {
yield take('LOGIN')
// ... perform the login logic
yield take('LOGOUT')
// ... perform the logout logic
}
}

23
Advanced Concepts
1. Helper utils
2. Effect Combinators
3. Fork Model
4. Channels
5. External I/O

24
Helper Utils and Effect Creators
export default function* rootSaga() {
yield takeLatest('FETCH_USERS', fetchUsers)
yield takeEvery('CREATE_USER', createUser)
}

25
Effect Combinators
● Run Tasks in Parallel
● Starting Race Between Multiple Tasks

26
Effect Combinators - all
function* fetchAll() {
yield all([
call(fetchResource, 'users'), // task1
call(fetchResource, 'comments'), // task2,
call(delay, 1000)
])
}

27
Effect Combinators - race
function* fetchPostsWithTimeout() {
const {posts, timeout} = yield race({
posts: call(fetchApi, '/posts'),
timeout: call(delay, 1000)
})
if (posts)
put({type: 'POSTS_RECEIVED', posts})
else
put({type: 'TIMEOUT_ERROR'})
}

28
Effect Combinators - Not Only For Requests
function* backgroundTask() {
while (true) { ... }
}
function* watchStartBackgroundTask() {
while (true) {
yield take('START_BACKGROUND_TASK')
yield race({
task: call(backgroundTask),
cancel: take('CANCEL_TASK')
})
}
}

29
Fork Model
● fork is used to create attached fork
● spawn is used to create detached forks
● non-blocking

30
Fork Model
Fetch All
Fetch Comments
Fetch Users
main
Blocking Call
Non-blocking Call
Wait All for Terminate

31
Fork Model - Completion
function* fetchAll() {
const task1 = yield fork(fetchResource, 'users')
const task2 = yield fork(fetchResource, 'comments')
yield call(delay, 1000)
}
function* main() {
yield call(fetchAll)
}
Non-blocking
Blocking

32
Fork Model - Error PropagationFork Model
Fetch All
Fetch Comments
Fetch Users
main
Blocking Call
Non-blocking Call
Catch All Errors Catch Forks Errors

33
Fork Model - Error Propagation
try{
yield fork(watchBgTask);
yield fork(watchCheckout)
} catch (err) {
yield put({type:”CRITICAL_ERROR”});
}

34
Fork Model - Cancelation
function* main() {
while ( yield take(START_BACKGROUND_SYNC) ) {
const bgSyncTask = yield fork(bgSync)
yield take(STOP_BACKGROUND_SYNC)
yield cancel(bgSyncTask)
}
}

35
Fork Model - Detect Cancellation Inside Saga
function* bgSync() {
try {
while (true) {
yield put(actions.requestStart())
const result = yield call(someApi)
yield put(actions.requestSuccess(result))
}
} finally {
if (yield cancelled())
yield put(actions.requestFailure('Sync cancelled!'))
}
}

36
Channels
● Buffer actions from the Redux Store
● Connect take effect to external event source
● Communicate between sagas

37
Channels - Buffer Actions
Saga
F1
Fork
F2
F3
Store
Put 1
Request 1
Request 2
Request 3
Take
Put 2
Put 3

38
function* watchRequests() {
while (true) {
const {payload} = yield take('REQUEST')
yield fork(handleRequest, payload)
}
}

39
Saga StorePut 2
Request 1
Request 2
Request 3
Channel
Put 1
Put 3
Store in Buffer

40
const requestChan = yield actionChannel('REQUEST')
while (true) {
const {payload} = yield take(requestChan)
yield call(handleRequest, payload)
}
}

41
const requestChan = yield actionChannel('REQUEST')
while (true) {
const {payload} = yield take(requestChan)
yield call(handleRequest, payload)
}
}

42
Channels - eventChannel
Socket Channel Saga ChanneleventChannel
as argument
creates
My Saga
take, put● emmiter(payload)
● emmiter(END)

43
export function* watchOnPings() {
const socket = yield call(createWebSocketConnection)
const socketChannel = yield call(createSocketChannel, socket)
while (true) {
const payload = yield take(socketChannel)
yield put({ type: INCOMING_PONG_PAYLOAD, payload })
yield fork(pong, socket)
}
}

44
function* pong(socket) {
yield call(delay, 5000)
yield apply(socket, socket.emit, ['pong'])
}

45
Channels - Communication Between Sagas
Fork 1
Fork 2
Fork 3
Saga
Shared Channel
aka load balancing
Push message to free fork
create

46
const chan = yield call(channel)
for (var i = 0; i < 3; i++) {
yield fork(handleRequest, chan)
}
while (true) {
const {payload} = yield take('REQUEST')
yield put(chan, payload)
}
}

47
function* handleRequest(chan) {
while (true) {
const payload = yield take(chan)
// process the request
}
}

49
Unit Testing
● Mockless unit testing
● Saga Helpers

50
Unit Testing - Iterate and Compare
function* incrementAsync() {
yield delay(1000)
yield put({ type: 'INCREMENT' })
}

51
test('incrementAsync Saga test', (assert) => {
const gen = incrementAsync()
// now what ?
});

52
gen.next() //=>{ done: false, value: <result ... delay(1000)> }
gen.next() //=>{ done: false, value: <result ... put({...})> }
gen.next() //=>{ done: true, value: undefined }

53
test('incrementAsync Saga test', (assert) => {
const gen = incrementAsync()
assert.deepEqual(
gen.next().value,
call(delay, 1000),
'incrementAsync Saga must call delay(1000)'
)
// ....
});

54
Unit Testing - Different Branches
function* doStuffThenChangeColor() {
yield put(doStuff());
yield put(doStuff());
const action = yield take(CHOOSE_NUMBER);
if (action.payload.number % 2 === 0) {
yield put(changeUI('red'));
} else {
yield put(changeUI('blue'));
}
}

55
Unit Testing - Clonable Generator
test('doStuffThenChangeColor', assert => {
const gen = cloneableGenerator(doStuffThenChangeColor)();
gen.next(); // DO_STUFF
gen.next(); // CHOOSE_NUMBER
// ...
});

56
Unit Testing - Clonable Generator - First Branch
// ...
const clone = gen.clone();
assert.deepEqual(
clone.next(chooseNumber(2)).value,
put(changeUI('red')),
'should change the color to red'
);

57
Unit Testing - Clonable Generator - Second Branch
// ...
const otherClone = gen.clone();
assert.deepEqual(
otherClone.next(chooseNumber(3)).value,
put(changeUI('blue')),
'should change the color to blue'
);

58
Unit Testing - Clonable Generator
test('doStuffThenChangeColor', assert => {
gen.next(); // CHOOSE_NUMBER
// ...
});

59
Unit Testing - Fork Effect
function* main() {
while ( yield take(START_BACKGROUND_SYNC) ) {
const bgSyncTask = yield fork(bgSync)
yield take(STOP_BACKGROUND_SYNC)
yield cancel(bgSyncTask)
}
}

60
Unit Testing - Fork Effect
expect(generator.next().value).toEqual(take(START_BG_SYNC));
expect(generator.next({ type: 'START_BG_SYNC' }).value).toEqual(fork(bgSync));
const mockTask = createMockTask();
expect(generator.next(mockTask).value).toEqual(take(STOP_BACKGROUND_SYNC));
expect(generator.next().value).toEqual(cancel(mockTask));

62
Recommendations
1. Code Smells
2. Integration with React Component
3. Identify Core Flows
4. Invest in error-handling
5. Extract Reusable Saga
6. Unit Testing strategy

63
Code Smells
1.Avoid Routing
2.Avoid Reducer Logic

64
Code Smells - Routing in Sagas
// ...
import { push } from 'react-router-redux';
export default function* handleProductRedirect() {
const productId = yield select(getRouterProductId);
yield put(push(`/checkout/product/${productId}`));
}

65
Code Smells - Reducer Logic in Sagas
export function* watchForSomething() {
while (true) {
const {payload: {oneThing, anotherThing}} = yield take(SOME_THING);
yield put(DO_ONE_THING, oneThing);
yield put(DO_ANOTHER_THING, anotherThing);
}
}

66
Code Smells - Reducer Logic in Sagas
● Data Massaging
● switch for action.type ...
● Something other then Side-Effect

67
Extract Reusable Saga
export default function standartRequest(request, success, failure) {
return function* requestHandlingSaga(action) {
try {
const response = yield call(request, action.payload);
yield put(success(response));
} catch (error) {
yield put(failure(error));
}
};
}

68
Extract Reusable Saga
const handleEntityRequest = standartRequest(
Api.fetchEntity
ENTITY_REQUEST_SUCCESS,
ENTITY_REQUEST_ERROR
)

69
Integration with React Component
● componentDidMount - initialize sub-flow
● componentWillUnmount - teardown sub-flow
● Combine with Routing
● Sync with bootstrap of application

70
Combine With Routing
• /entities/ -> EntitiesRoute - dispatch list request
• /entities/ -> EntitiesList
• /entities/:id -> EntityRoute - dispatch single entity
●/entities/:id -> Entity
●/entities/:id/edit -> EntityEdit - dispatch save

71
Combine With Routing
export default function* watchEntities() {
yield takeLatest(ENTITES_REQUEST,handleEntitiesRequest);
yield takeLatest(ENTITY_REQUEST,handleEntityRequest);
yield takeLatest(ENTITY_SAVE_REQUEST,handleEntitySaveRequest);
}

72
Sync with Application Bootstrap
export default function* watchEntities() {
yield takeLatest(ENTITES_REQUEST, runAfterAuth(handleEntitysRequest)),
yield takeLatest(ENTITY_REQUEST, runAfterAuth(handleEntityRequest));
yield takeLatest(ENTITY_SAVE_REQUEST, handleEntitySaveRequest);
}

73
Sync with Application Bootstrap
export default function* runAfterAuth(handler) {
return function* (action){
const isAuthenticated = yield select(isAppAuthDone);
if (!isAuthenticated) {
yield take(APP_AUTH_SUCCESS);
}
yield call(handler, action)
}
}

74
Invest in Error Handling
1. Acton Error Naming Convention
• like “*_ERROR” postfix in actions naming
2. Unified way to make requests, I/O
3. Logger and some UI to show error to the user

75
Error Handling
export default function* rootSaga() {
try {
yield all([
watchAuth(),
watchEntities()
])
} catch (e) {
logger.error(e);
yield put(errorCritical(e));
}
}

78
Unit Testing Strategy
1. Start from covering top flows for example
• must have watchAuth, watchCheckout
• nice to have watchEntities
2. Cover reusable sagas like standartRequest, runAfterAuth

82
Summary
1. Inspired by Saga pattern, however it’s not exact implementation of Saga
pattern
2. Provides constraints to handle side-effects in one place
3. Allows maintainable unit testing of side-effect (without mocking)
4. Saga works great for side-effects, but produces code smells if used for
other tasks like routing, data massaging (aka reducers logic)

84
Future Reading
● Origins
○ Sagas - original paper
○ Confusion about Saga pattern
○ Clarifying the Saga pattern
○ Communicating Sequential Processes
● redux-saga
○ Saga ? Why not CSP ?
○ External Resources
● Other Domains
○ Applying Saga Pattern
○ Sagas
● Unit Testing
○ Mocking is a Code Smell

88
Side-Effects
● State/Assignments
● Read/Write Data
● Communicate Over Network
● Raise Exception
● DOM
In computer science, a function or expression is said to have a
side effect if, in addition to producing a value, it also modifies
some state or has an observable interaction with calling
functions or the outside world

89
Give Me a Label
const label = await this.getLabel();

90
May Launch Missiles
async function getLabel () {
const val = Math.random();
if (val > 0.5){
await launchMissles();
return `foo foo ${val}`
}
return `blah blah ${val}`;
}

91
Why should I care about side effects ?
“Side effects are lies. Your function promises to do one thing,
but it also does other hidden things...they are devious and
damaging mistruths that often result in strange temporal
couplings and order dependencies.”
Clean Code, Robert Martin

92
Things to remember
● A program without side effects is useless
● Side effects are neither evil nor taboo
● The key is to
○ limit side effects
○ clearly identify them
○ avoid scattering them throughout the code.

93
Minuses
● issues with stacktrace
● more boilerplate code
● structuring sagas
● learning curve

94
Pluses
● side-effects isolated in one place
● maintainable code (unit testable)
● loosely coupled system

96
Basics Concepts
1. Separate Instructions from Execution
2. Use ES6 generator to define set of instructions
3. Use redux middleware to execute instructions
4. Execution works with `pull-future-actions` approach

97
Saga
1. Improve Loose Coupling (SR, Component and Actions)
2. Something on top of async/await, Observables
3. Maintainable Unit Testing (without mocks)
4. Makes important business flows explicitly defined in code
5. More explicit error handling techniques

Using Redux-Saga for Handling Side Effects

Recommended

More Related Content

What's hot (20)

Similar to Using Redux-Saga for Handling Side Effects (20)

More from GlobalLogic Ukraine (20)

Recently uploaded (20)

Using Redux-Saga for Handling Side Effects