Redux sagas allow us to handle application side effects, such as asynchronous loading of data.<\/p>\n
Assuming you have a React application created, we need run the following<\/p>\n
To create a simple demo, we’ll change the App.js file to <\/p>\n
\r\nimport React from 'react';\r\nimport store from '.\/store';\r\nimport { Fetch } from '.\/rootReducer';\r\n\r\nfunction App() {\r\n\r\n function handleDoFetch() {\r\n store.dispatch({type: Fetch});\r\n }\r\n\r\n return (\r\n <div className="App">\r\n <button onClick={handleDoFetch}>Do Fetch<\/button>\r\n <\/div>\r\n );\r\n}\r\n\r\nexport default App;\r\n<\/pre>\nSo this will simply dispatch an action which will ultimately be handled by our saga. Before this happens let’s create a redux store and set up the redux saga middleware, here’s my store.js file<\/p>\n
\r\nimport { createStore, applyMiddleware, combineReducers } from "redux";\r\nimport createSagaMiddleware from "redux-saga";\r\nimport rootReducer from ".\/rootReducer";\r\nimport rootSaga from ".\/rootSaga";\r\n\r\nexport const sagaMiddleware = createSagaMiddleware();\r\n\r\nconst store = applyMiddleware(sagaMiddleware)(createStore)(\r\n combineReducers({\r\n rootReducer,\r\n })\r\n);\r\n\r\nsagaMiddleware.run(rootSaga);\r\n\r\nexport default store;\r\n<\/pre>\nWe don’t need to combineReducers as there’s only one, but it’s there for an example of setting up multiple reducers. Let’s now create a very basic reducer named rootReducer.js<\/p>\n
\r\nexport const Fetch = "FETCH";\r\nexport const FetchEnded = "FETCH_ENDED";\r\n\r\nexport default (state = {}, action) => {\r\n switch (action.type) {\r\n case FetchEnded:\r\n console.log("Fetch Ended");\r\n return {\r\n ...state,\r\n data: "Fetch Ended"\r\n }\r\n default:\r\n break;\r\n } \r\n return state;\r\n}\r\n<\/pre>\nNotice we’ve got two actions exported, Fetch<\/em> and FetchEnded<\/em> but there’s nothing handling Fetch<\/em> in this case. This is because redux middleware will pass this through to the redux-saga we’re about to create. We could also handle Fetch<\/em> here and still handle it also within the saga, the point being the saga is going to handle this action when it see’s it.<\/p>\nNow we’ve got everything in place, let’s put the final piece in place, the saga will be stored in rootSaga.js and here it is<\/p>\n
\r\nimport { put, takeLatest } from 'redux-saga\/effects'\r\nimport { Fetch, FetchEnded } from ".\/rootReducer";\r\n\r\nfunction *fetchData() {\r\n console.log("fetchData")\r\n yield put({ type: FetchEnded });\r\n}\r\n\r\nfunction* rootSaga() {\r\n yield takeLatest(Fetch, fetchData);\r\n}\r\n\r\nexport default rootSaga;\r\n<\/pre>\nNotice that the rootSaga<\/em> function is a function generator and it yields the result of a call to fetchData<\/em> each time the Fetch<\/em> action is detected.<\/p>\nIt might be the fetchData<\/em> yield’s many values or even sits in a loop yielding data but in this example we’ve kept things simple. Running the application will display a button and using the browser’s dev tools, when the button is pressed the Fetch<\/em> action is detected by the saga and the fetchData<\/em> function runs, which then in turn dispatches a FetchEnded<\/em> action which is handled by the reducer.<\/p>\nAs stated, our fetchData<\/em> is very simple but in a real world scenario this function could be acting as a websocket client and for every value returned would yield each value within a while(true) loop or the likes until cancelled or maybe an error ocurred.<\/p>\n","protected":false},"excerpt":{"rendered":"Redux sagas allow us to handle application side effects, such as asynchronous loading of data. Assuming you have a React application created, we need run the following yarn add react-redux yarn add redux-saga To create a simple demo, we’ll change the App.js file to import React from ‘react’; import store from ‘.\/store’; import { Fetch […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,274],"tags":[],"class_list":["post-7639","post","type-post","status-publish","format-standard","hentry","category-javascript","category-redux-saga"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7639"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7639\/revisions"}],"predecessor-version":[{"id":7698,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7639\/revisions\/7698"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}