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
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
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}
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())