# Using Sagas
<https://redux-saga.github.io/redux-saga/docs/introduction/BeginnerTutorial.html>

* Sagas connect as middleware to a redux store.
* Sagas run like cuncurrent worker tasks and have to be started for that.

```jsx
// main.js
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import { rootSaga } from './sagas'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(helloSaga)
```

* Asynchronous actions need to be split into more tasks to the dispatcher, so reducers can always return immediately:

```jsx
// actions.js
function increment(payload) {
    return {
        type: 'INCREMENT_REQUEST',
        payload
    }
}

// reducers.js
export default function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT_REQUEST':
            // disable button
            // print message
            /* YOU DON'T NEED TO CALL THE FUNCTION HERE.
            IT'S INTERCEPTED BY THE MIDDLEWARE. */
            return state
        case 'INCREMENT_SUCCESS':
            return state + 1
        case 'INCREMENT_FAIL':
            // print error message
        default:
            return state
    }
}

// sagas.js
import { call, put, takeEvery } from 'redux-saga/effects'

// Worker
export function * incrementAsync () {
    try {
        const data = yield call(Api.isIncrementOk)
        yield put({ type: 'INCREMENT_SUCCESS', data })
    } catch (error) {
        yield put({ type: 'INCREMENT_FAIL', error})
    }
}

// Watcher (intercepts INCREMENT_REQUEST, dispatches INCREMENT_SUCCESS or INCREMENT_FAIL in return.)
export function * watchIncrementAsync() {
    yield takeEvery('INCREMENT_REQUEST', incrementAsync)
}

// export all sagas in parallel
export default function * rootSaga() {
    yield takeEvery('INCREMENT_REQUEST')
    yield takeEvery('DECREMENT_REQUEST')
}
```

## Saga helpers
* Yield 'effects', in 'redux-saga/effects'
* `takeEvery` handles every action of a type that is dispatched.
* Allows multiple `incrementAsync` instances to be started concurrently.
* `takeLatest` in contrast only takes the response of the latest requested action.
* Allows only one `incrementAsync` to run at a time
* If another task is requested, the previous is automatically cancelled.
* You can start multiple sagas which behave like they were forked.

## Declarative effects
* Effects are plain JavaScript objects expressing Saga logic.
* they contain information to be interpreted by the middleware.
* Sagas can yield effects in multiple forms, the easiest are promises
* Use `call` to call functions. Call returns on object describing to the middleware what to do. This is similar to action creators, which describe actions for the reducer.
* For testing, you can just check whether the effect object ist correct, you don't need to actually call the async function.
    - <https://redux-saga.github.io/redux-saga/docs/basics/DeclarativeEffects.html>

## Dispathing actions to the store