This document provides an overview of how to add Redux-Saga to a React Native application. It discusses setting up the Redux-Saga boilerplate and adding a TasksSaga to handle asynchronous tasks. It also covers connecting to a REST API using helper functions in Redux-Saga like take, call, put, and fork. Finally, it lists additional resources for learning more about REST APIs and Redux-Saga.

1. Jump into React-
Native 5/6
Waqqas Jabbar
4th July 2018

2. What you learned previously
1. Redux-Form
2. Styling

3. 1. REST API
a. Postman
2. Redux-Saga
What you will learn today

4. What you will do today
● Add boilerplate to run Redux-Saga
○ yarn add apisauce jsuri lodash moment moment-timezone redux-saga yarn
○ Add boilerplate code
● Add TasksSaga
● Add REST API
● Handling network connection
● Generator Functions

5. TODO App - REST Device API
https://documenter.getpostman.com/view/2287673/RWM6wrX5

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

7. Redux without Middleware

8. Redux with Middleware

9. 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

10. Generator Functions
● Generator functions are functions that can start, paused, and resumed. It maintains its
state
● yield defines one iteration

11. Redux-Saga: 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

12. Reading
REST API
● https://restful.io/an-introduction-to-api-s-cee90581ca1b
● https://www.tutorialspoint.com/restful/restful_introduction.htm
● https://knpuniversity.com/screencast/rest/intro
Redux-Saga
● https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html

13. Reference
● https://redux-saga.js.org/
● https://documenter.getpostman.com/view/2287673/RWM6wrX5
● https://github.com/infinitered/apisauce
● https://facebook.github.io/react-native/docs/alert.html
● https://github.com/gnestor/react-native-statusbar-alert
● https://www.getpostman.com/
● https://reactnavigation.org/docs/en/navigation-options-resolution.html