Some UIs were more complex than others. Using sagas has certainly improved how fast it was possible to build them out. Using the Saga Pattern can significantly reduce development time and allows to control event flow inside an entire application with easy to test function generators.

1. Sagas middleware architecture
Mateusz Bosek

2. Types of middlewares
redux-thunk
It allows to write action
creators that return a
function instead of an
action. The thunk can be
used to delay the dispatch
of an action or to dispatch
only if a certain condition is
met.
redux-saga
It aims to make the
execution of application side
effects (e.g., asynchronous
tasks like data fetching and
impure procedures such as
accessing the browser
cache) manageable and
efficient. It uses the ES6
feature called generators,
making the flow easy to
read as synchronous code.
redux-observable
Inspired by redux-thunk
allows developers to
dispatch a function that
returns an Observable,
Promise or iterable of
action(s). When the
observable emits an action,
or the promise resolves an
action, or the iterable gives
an action out, that action is
then dispatched as usual.

3. Comparing middlewares
1. redux-thunk
Comparing middlewares
1. redux-thunk
Thunks begin running into hurdles once more complex sequences
of asynchronous flows are required
A thunk must utilize getState(), increasing the complexity and
functional impurity of your thunk
A component calling the thunk needs additional state and logic to
make these decisions, which can quickly break DRY principles
The most-widely adopted and simplest of the middlewares
Actions can not only be small objects, but functions as well

4. Comparing middlewares
1. redux-thunk
Comparing middlewares
1. redux-thunk

5. Comparing middlewares
1. redux-sagas p.1
Uses generators
Easily tracking and orchestrating asynchronous processes in
synchronous looking code
Allows for fairly complicated flows
Many helpers, effects and solid doc
Action creators stays pure
Sagas are composable
Simpler error handling

6. Comparing middlewares
1. redux-sagas p.2
The runtime which is 20kb+ minified and gzipped - nearly as big
as React or jQuery
Sagas always receive actions after reducers
Requires the steepest learning curve
Carefully consider what needs to be a side effect and what should
really be a pure state transformation.
Easy to test without mocking
Isolates side-effect code to a single area of app

7. Comparing middlewares
1. redux-observables
Requires the steepest learning curve
Observables offer a great combination of a comprehensive API
Testability
Functional purity
Ability to perform complex asynchronous patterns
Inspired by redux-saga

8. What is saga?
Sagas are responsible for orchestrating complex/asynchronous
operations.
Sagas are created using Generator functions.
Redux-saga's goal is to provide a mechanism for orchestrating
complex async operations with Redux.

9. What is saga?

10. Generator function*
Generators are functions that can be exited and later re-entered.
Their context will be saved across re-entrances
Generators are cooperative which means that it chooses when it will
allow and interruption so that it can cooperate with the rest of your
program
function* foo() {
yield takeEvery('FETCH_PRODUCTS_REQUESTED', fetchProducts);
}

11. yield
The yield expression is used to pause the function and give out a
value
yield can also take in value when we restart the function
yield* is used to delegate to another outside generator function

12. How to run the function*
Invoke the function and store it as a variable
The invocation of the function returs an iterable object back to us
Call next on this object to take us to the first yield point in the
function
This call will give us back an object with the properties of value and
done
We can continue iterating through this until we are done or stop at
any point

13. How to run the function*

14. Watchers, workers, effects
Watchers
export function* watchFetchProducts() {
yield takeEvery('FETCH_PRODUCTS_REQUEST', fetchProducts);
}

15. Watchers, workers, effects
Workers
export function* fetchAllProducts(action) {
try {
const data = yield call(Api.fetchUser, action.payload.url)
yield put({ type: "FETCH_USERS_SUCCESS", data })
} catch (error) {
yield put({ type: "FETCH_USERS_FAIL", error })
}
}

16. Watchers, workers, effects
Effects
call - runs a function, returns a promise, pauses the saga until the promise is
resolved
put - dispatch an action
Others:
fork, select, race, spawn, join, cancel

17. Async/await vs redux-saga

18. Async/await vs redux-saga
Saga being an interpreter of effects is granting us the full control of how and
when those effects are resolved + effects are just simple object which are
easily comparable and can be monitored which is also way harder with
Promises.
Where do u see a steep learning curve with redux-saga? Could something
be done to ease that? As to the syntax they both (async and generators) are
pretty much the same - just using other keywords. What is done under the
hood completely different, but this knowledge is not really that much
needed for beginners.

19. Testing
function* startForeman() {
yield fork(startTranspiler);
yield fork(startLinter);
}

20. Testing
describe('sagas/foreman', () => {
const generator = startForeman();
it('forks the transpiler process', () => {
const result = generator.next();
expect(result.value).to.deep.equal(fork(foreman.startTranspiler))
});
it('forks the linter process', () => {
const result = generator.next();
expect(result.value).to.deep.equal(fork(foreman.startLinter))
});
})

21. https://redux-saga.js.org/
https://medium.com/@lavitr01051977/make-your-first-call-to-api-usi
ng-redux-saga-15aa995df5b6
https://medium.com/@totaldis/redux-saga-in-action-s-f7d11cffa35a

22. mateusz.bosek@hubranch.com
Private and company consultation
THANK YOU