Introduction to Redux Saga and how does it fit into react-native development. Also a sneak peak into how does redux-saga do their magic using JS generator functions

1. Redux Saga
Waqqas Jabbar

2. Pre-requisites
● Basic JS concepts: Promise
● Basic concepts of React.js
● Preferred: Basic concepts of Redux

3. React.js
“A JavaScript library for building user interfaces”
● You need other components to make a fully functional app
○ Redux for state management
○ API calls

4. Redux

5. Basic Redux Life-cycle

6. Middleware
Put code between
dispatching an action
and
reaching a reducer

7. Redux Life-cycle with middlewares

8. Redux-Saga: Advantages
● Write Async code a synchronous
○ More readable
● I.e. Write business logic in a single location
● Easy Testing
● Written as generator functions

9. Generator Functions (1/3)
● Generator functions are functions that can start, paused,
and resumed. It maintains its state
● yield defines one iteration
● First iteration: {“value”: “one”, done: false}

10. Generator functions (2/3)
● {“value”: 0, done: false}
● {“value”: 1, done: false}
● {“value”: 21, done: false}
● {“value”: 321, done: false}

11. Generator functions (3/3)

12. Commonly used helper functions
● take(takeLatest, takeEvery): handle an action
● call: call a function that return promise
● put: generate a new action
● select: get data from redux
●
● fork: fork a new “thread”
● channel

13. Example: API Call
● Generate action: GET_LIST_REQUEST
● Saga
○ takeLatest(GET_LIST_REQUEST, getListRequest)
● getListRequest(api, action){
○ const response = yield call(api.getList)
○ if(response.ok)
■ yield put(getListRequestSuccess(response.data))
○ else
■ yield put(getListRequestFailure(response))
IMPORTANT: Some actions for sagas, other for redux

14. EXAMPLE: HANDLING CALLBACKS IN SAGAS
● Limitation: Cannot call yield in callback function in
generator function
● Solution: use “channel”
● const passThroughChannel = channel();
● takeEvery(passThroughChannel, passThroughChannelWatcher)
● const passThroughChannelWatcher = function* (action) {
● yield put(action);
● };
● Alert.alert()
○ onPress: passThroughChannel.put(actionCreator())

15. Thank You
Coming Soon
React-Native Training
Twitter: @waqqasjabbar
Medium:
https://medium.com/@waqqas