Redux Saga is a middleware library that is used to handle side-effects from asynchronous actions in Redux. It is way more complex compared to Redux-Thunk\nThere are trade-offs for both Thunk or Saga, so we can not say that Saga is better than Thunk, it depends on each use case.
A saga is actually a story created to handle all logic related to side-effects in asynchronous actions. It has special abilities to start, pause or stop the functions. These abilities are based on the new ES6 feature called generator\nA generator looks just like a normal function, except it has the word yield inside it. With this yield, we can pause, restart or resume the function as many times as we like.\nYou can read more about generator functions in my other blog post here
With Thunk we can create an action that returns a function, but in Saga we return an object.\nIn general, Thunk is often used in a simple or small scale app, whereas Saga is used in a more complex and bigger app. This is because as the app is getting larger or more complex, the actions inside Thunk can get nested and messy.
The code below is an example usage of Redux-Saga:
\nimport { takeLatest } from 'redux-saga';\nimport { call, put } from 'redux-saga/effects';\n\nimport validateLogin from './actions';\n\nfunction* loginFormSubmit(payload) {\n try {\n const result = yield call(validateLogin, payload);\n yield put({ type: 'LOGIN_SUCCESS', payload });\n } catch (error) {\n yield put({ type: 'LOGIN_FAIL', payload });\n }\n}\n\nfunction* watchSaga() {\n yield* takeLatest('ON_FORM_SUBMIT', loginFormSubmit);\n}\n\nexport default watchSaga;From the code above, we run watchSaga as a watcher saga, we yield takeLatest inside it.
\ntakeLatest is a helper function that has a task to listen or watch for ONFORMSUBMIT action dispatched and then it will run loginFormSubmit.\nput and call in the code above is called Redux-Saga effects, both are plain JavaScript objects that carry instructions to be executed by the middleware.\n_call* is like its name, call a validateLogin with payload as the given argument, whereas put, will dispatch an action to the Store\nIn the code above, if login validation is success, it will dispatch LOGIN_SUCCESS otherwise it will dispatch LOGIN_FAIL to the Store.
Then all we need to do for the code above to run is to put it inside the middleware:
\nimport { createStore, applyMiddleware } from 'redux';\nimport createSagaMiddleware from 'redux-saga';\nimport rootSaga from './sagas';\n//...\nconst sagaMiddleware = createSagaMiddleware();\nconst store = createStore(reducers, applyMiddleware(sagaMiddleware));\n//...\nsagaMiddleware.run(rootSaga);That's it! The next step is to create a reducer to handle all the actions dispatched, which is not covered in here.
\nThe way a saga with generator function works is that once the promise is run and yielded, it will not continue until the promise is resolved. Everytime an effect or a yield statement is found, it will pause or suspend and resume again after the promise is resolved.
"}},"pageContext":{"slug":"/redux-saga/"}},"staticQueryHashes":[]}