{"id":42,"date":"2024-12-18T07:54:30","date_gmt":"2024-12-18T07:54:30","guid":{"rendered":"https:\/\/fullstacknotes.netblocs.com\/?p=42"},"modified":"2024-12-18T09:55:24","modified_gmt":"2024-12-18T09:55:24","slug":"must-know-react-libraries-redux-saga","status":"publish","type":"post","link":"https:\/\/netblocs.com\/fullstacknotes\/must-know-react-libraries-redux-saga\/","title":{"rendered":"Best React Libraries: Redux-Saga"},"content":{"rendered":"
\n
\"\"<\/figure><\/div>\n\n\n

Redux-Saga<\/h3>\n\n\n\n

Redux-Saga is a library written in JavaScript that facilitates state management and managing side effects in React applications. Here are some key points about what Redux-Saga does:<\/p>\n\n\n\n

Key Features of Redux-Saga<\/h3>\n\n\n\n
    \n
  1. Side Effect Management<\/strong>: It manages side effects such as API calls, timeouts, and other asynchronous operations.<\/li>\n\n\n\n
  2. Clean and Testable Code<\/strong>: It makes the code written to manage side effects cleaner and more testable.<\/li>\n\n\n\n
  3. Asynchronous Operations<\/strong>: It manages asynchronous operations more easily with Redux actions.<\/li>\n\n\n\n
  4. Flexible Control<\/strong>: It provides greater control over capturing and processing actions.<\/li>\n\n\n\n
  5. Manageable Flows<\/strong>: It makes complex flows and business logic more manageable.<\/li>\n<\/ol>\n\n\n\n

    Redux-Saga works using generator functions, providing developers with great flexibility in managing complex asynchronous workflows in their applications. For example, you can use Redux-Saga to send a specific action when making an API call, and then send different actions based on whether the call is successful or fails.<\/p>\n\n\n\n

    \n\n\n\n

    Redux-Saga Example<\/h3>\n\n\n\n

    An application where a switch button sends the light status to the backend and updates the switch status when a positive response is received from the backend:<\/p>\n\n\n\n

    \n\n\n\n

    1. App.js<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import <\/span>React<\/span>,<\/span> <\/span>{<\/span> <\/span>useEffect<\/span> <\/span>}<\/span> from <\/span>'react'<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>useDispatch<\/span>,<\/span> <\/span>useSelector<\/span> <\/span>}<\/span> from <\/span>'react-redux'<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>toggleLightRequest<\/span> <\/span>}<\/span> from <\/span>'.\/redux\/actions'<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>dispatch<\/span> <\/span>=<\/span> <\/span>useDispatch<\/span>()<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>lightStatus<\/span> <\/span>=<\/span> <\/span>useSelector<\/span>(<\/span>state<\/span> <\/span>=><\/span> <\/span>state<\/span>.<\/span>lightStatus<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>loading<\/span> <\/span>=<\/span> <\/span>useSelector<\/span>(<\/span>state<\/span> <\/span>=><\/span> <\/span>state<\/span>.<\/span>loading<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>const<\/span> <\/span>handleToggle<\/span> <\/span>=<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>dispatch<\/span>(<\/span>toggleLightRequest<\/span>(<\/span>!<\/span>lightStatus<\/span>))<\/span>;<\/span><\/span>\n  <\/span>};<\/span><\/span>\n<\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span>><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>Light Status: <\/span>{<\/span>lightStatus<\/span> <\/span>?<\/span> <\/span>'On'<\/span> <\/span>:<\/span> <\/span>'Off'<\/span>}<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>onClick<\/span>=<\/span>{<\/span>handleToggle<\/span>}<\/span> <\/span>disabled<\/span>=<\/span>{<\/span>loading<\/span>}<\/span>><\/span><\/span>\n        <\/span>{<\/span>loading<\/span> <\/span>?<\/span> <\/span>'Updating...'<\/span> <\/span>:<\/span> <\/span>'Change Status'<\/span>}<\/span><\/span>\n      <\/span><\/<\/span>button<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport default <\/span>App<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \n\n\n\n
    2. redux\/actions.js<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    export<\/span> <\/span>const<\/span> <\/span>TOGGLE_LIGHT_REQUEST<\/span> <\/span>=<\/span> <\/span>'TOGGLE_LIGHT_REQUEST'<\/span>;<\/span><\/span>\nexport<\/span> <\/span>const<\/span> <\/span>TOGGLE_LIGHT_SUCCESS<\/span> <\/span>=<\/span> <\/span>'TOGGLE_LIGHT_SUCCESS'<\/span>;<\/span><\/span>\nexport<\/span> <\/span>const<\/span> <\/span>TOGGLE_LIGHT_FAILURE<\/span> <\/span>=<\/span> <\/span>'TOGGLE_LIGHT_FAILURE'<\/span>;<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>const<\/span> <\/span>toggleLightRequest<\/span> <\/span>=<\/span> <\/span>(<\/span>status<\/span>)<\/span> <\/span>=><\/span> (<\/span>{<\/span><\/span>\n  type<\/span>:<\/span> <\/span>TOGGLE_LIGHT_REQUEST<\/span>,<\/span><\/span>\n  payload<\/span>:<\/span> <\/span>status<\/span>,<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>const<\/span> <\/span>toggleLightSuccess<\/span> <\/span>=<\/span> <\/span>(<\/span>status<\/span>)<\/span> <\/span>=><\/span> (<\/span>{<\/span><\/span>\n  type<\/span>:<\/span> <\/span>TOGGLE_LIGHT_SUCCESS<\/span>,<\/span><\/span>\n  payload<\/span>:<\/span> <\/span>status<\/span>,<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>const<\/span> <\/span>toggleLightFailure<\/span> <\/span>=<\/span> <\/span>()<\/span> <\/span>=><\/span> (<\/span>{<\/span><\/span>\n  type<\/span>:<\/span> <\/span>TOGGLE_LIGHT_FAILURE<\/span>,<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \n\n\n\n
    3. redux\/reducer.js<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import <\/span>{<\/span> <\/span>TOGGLE_LIGHT_SUCCESS<\/span>,<\/span> <\/span>TOGGLE_LIGHT_FAILURE<\/span>,<\/span> <\/span>TOGGLE_LIGHT_REQUEST<\/span> <\/span>}<\/span> from <\/span>'.\/actions'<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>initialState<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n  lightStatus<\/span>:<\/span> <\/span>false<\/span>,<\/span><\/span>\n  loading<\/span>:<\/span> <\/span>false<\/span>,<\/span><\/span>\n  error<\/span>:<\/span> <\/span>null<\/span>,<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>const<\/span> <\/span>lightReducer<\/span> <\/span>=<\/span> <\/span>(<\/span>state<\/span> <\/span>=<\/span> <\/span>initialState<\/span>,<\/span> <\/span>action<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>switch<\/span> (<\/span>action<\/span>.<\/span>type<\/span>) <\/span>{<\/span><\/span>\n    <\/span>case<\/span> <\/span>TOGGLE_LIGHT_REQUEST<\/span>:<\/span><\/span>\n      <\/span>return<\/span> <\/span>{<\/span> <\/span>...<\/span>state<\/span>,<\/span> loading<\/span>:<\/span> <\/span>true<\/span> <\/span>};<\/span><\/span>\n    <\/span>case<\/span> <\/span>TOGGLE_LIGHT_SUCCESS<\/span>:<\/span><\/span>\n      <\/span>return<\/span> <\/span>{<\/span> <\/span>...<\/span>state<\/span>,<\/span> lightStatus<\/span>:<\/span> <\/span>action<\/span>.<\/span>payload<\/span>,<\/span> loading<\/span>:<\/span> <\/span>false<\/span> <\/span>};<\/span><\/span>\n    <\/span>case<\/span> <\/span>TOGGLE_LIGHT_FAILURE<\/span>:<\/span><\/span>\n      <\/span>return<\/span> <\/span>{<\/span> <\/span>...<\/span>state<\/span>,<\/span> loading<\/span>:<\/span> <\/span>false<\/span>,<\/span> error<\/span>:<\/span> <\/span>'Could not update light status.'<\/span> <\/span>};<\/span><\/span>\n    <\/span>default<\/span>:<\/span><\/span>\n      <\/span>return<\/span> <\/span>state<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \n\n\n\n
    4. redux\/sagas.js<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import <\/span>{<\/span> <\/span>takeLatest<\/span>,<\/span> <\/span>call<\/span>,<\/span> <\/span>put<\/span> <\/span>}<\/span> from <\/span>'redux-saga\/effects'<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>TOGGLE_LIGHT_REQUEST<\/span>,<\/span> <\/span>toggleLightSuccess<\/span>,<\/span> <\/span>toggleLightFailure<\/span> <\/span>}<\/span> from <\/span>'.\/actions'<\/span>;<\/span><\/span>\n<\/span>\nfunction*<\/span> <\/span>toggleLightSaga<\/span>(<\/span>action<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>try<\/span> <\/span>{<\/span><\/span>\n    <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>yield<\/span> <\/span>call<\/span>(<\/span>apiToggleLight<\/span>,<\/span> <\/span>action<\/span>.<\/span>payload<\/span>)<\/span>;<\/span> <\/span>\/\/<\/span> Send request to the backend<\/span><\/span>\n    <\/span>if<\/span> (<\/span>response<\/span>.<\/span>ok<\/span>) <\/span>{<\/span><\/span>\n      <\/span>yield<\/span> <\/span>put<\/span>(<\/span>toggleLightSuccess<\/span>(<\/span>action<\/span>.<\/span>payload<\/span>))<\/span>;<\/span> <\/span>\/\/<\/span> Update status if successful<\/span><\/span>\n    <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span><\/span>\n      <\/span>yield<\/span> <\/span>put<\/span>(<\/span>toggleLightFailure<\/span>())<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>}<\/span> <\/span>catch<\/span> (<\/span>error<\/span>) <\/span>{<\/span><\/span>\n    <\/span>yield<\/span> <\/span>put<\/span>(<\/span>toggleLightFailure<\/span>())<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>apiToggleLight<\/span>(<\/span>status<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>fetch<\/span>(<\/span>'\/api\/toggle-light'<\/span>,<\/span> <\/span>{<\/span><\/span>\n    method<\/span>:<\/span> <\/span>'POST'<\/span>,<\/span><\/span>\n    headers<\/span>:<\/span> <\/span>{<\/span><\/span>\n      <\/span>'Content-Type'<\/span>:<\/span> <\/span>'application\/json'<\/span>,<\/span><\/span>\n    <\/span>},<\/span><\/span>\n    body<\/span>:<\/span> <\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span> <\/span>status<\/span> <\/span>}<\/span>)<\/span>,<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport default function* <\/span>rootSaga<\/span>()<\/span> <\/span>{<\/span><\/span>\n  yield <\/span>takeLatest<\/span>(<\/span>TOGGLE_LIGHT_REQUEST<\/span>,<\/span> <\/span>toggleLightSaga<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \n\n\n\n
    5. redux\/store.js<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import <\/span>{<\/span> <\/span>createStore<\/span>,<\/span> <\/span>applyMiddleware<\/span> <\/span>}<\/span> from <\/span>'redux'<\/span>;<\/span><\/span>\nimport <\/span>createSagaMiddleware<\/span> from <\/span>'redux-saga'<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>lightReducer<\/span> <\/span>}<\/span> from <\/span>'.\/reducer'<\/span>;<\/span><\/span>\nimport <\/span>rootSaga<\/span> from <\/span>'.\/sagas'<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>sagaMiddleware<\/span> <\/span>=<\/span> <\/span>createSagaMiddleware<\/span>()<\/span>;<\/span><\/span>\nconst<\/span> <\/span>store<\/span> <\/span>=<\/span> <\/span>createStore<\/span>(<\/span>lightReducer<\/span>,<\/span> <\/span>applyMiddleware<\/span>(<\/span>sagaMiddleware<\/span>))<\/span>;<\/span><\/span>\n<\/span>\nsagaMiddleware<\/span>.<\/span>run<\/span>(<\/span>rootSaga<\/span>)<\/span>;<\/span><\/span>\n<\/span>\nexport default <\/span>store<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \n\n\n\n
    6. index.js<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import <\/span>React<\/span> from <\/span>'react'<\/span>;<\/span><\/span>\nimport <\/span>ReactDOM<\/span> from <\/span>'react-dom'<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>Provider<\/span> <\/span>}<\/span> from <\/span>'react-redux'<\/span>;<\/span><\/span>\nimport <\/span>App<\/span> from <\/span>'.\/App'<\/span>;<\/span><\/span>\nimport <\/span>store<\/span> from <\/span>'.\/redux\/store'<\/span>;<\/span><\/span>\n<\/span>\nReactDOM<\/span>.<\/span>render<\/span>(<\/span><\/span>\n  <\/span><<\/span>Provider<\/span> <\/span>store<\/span>=<\/span>{<\/span>store<\/span>}<\/span>><\/span><\/span>\n    <\/span><<\/span>App<\/span> <\/span>\/><\/span><\/span>\n  <\/span><\/<\/span>Provider<\/span>><\/span>,<\/span><\/span>\n  <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'root'<\/span>)<\/span><\/span>\n)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \n\n\n\n
    Backend Example (\/api\/toggle-light)<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    app<\/span>.<\/span>post<\/span>(<\/span>'\/api\/toggle-light'<\/span>,<\/span> <\/span>(<\/span>req<\/span>,<\/span> <\/span>res<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>{<\/span> <\/span>status<\/span> <\/span>}<\/span> <\/span>=<\/span> <\/span>req<\/span>.<\/span>body<\/span>;<\/span><\/span>\n  <\/span>\/\/<\/span> Add backend logic here (e.g., save to database)<\/span><\/span>\n  <\/span>res<\/span>.<\/span>json<\/span>(<\/span>{<\/span> success<\/span>:<\/span> <\/span>true<\/span> <\/span>}<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \n\n\n\n
    Information Flow<\/h3>\n\n\n\n
    The information flow in this example occurs as follows:<\/p>\n\n\n\n
      \n
    1. App.js<\/strong>:\n
        \n
      • dispatch(toggleLightRequest(!lightStatus));<\/code> \u2192 When the button is pressed, the TOGGLE_LIGHT_REQUEST<\/code> action in actions.js<\/code> is dispatched.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • redux\/actions.js<\/strong>:\n
          \n
        • The toggleLightRequest<\/code> function is called.<\/li>\n\n\n\n
        • return { type: TOGGLE_LIGHT_REQUEST, payload: status };<\/code> sends the new status to lightReducer<\/code> in redux\/reducer.js<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • redux\/reducer.js<\/strong>:\n
            \n
          • The lightReducer<\/code> captures the TOGGLE_LIGHT_REQUEST<\/code> action from actions.js<\/code>.<\/li>\n\n\n\n
          • The loading<\/code> status is updated to true<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • redux\/sagas.js<\/strong>:\n
              \n
            • The takeLatest(TOGGLE_LIGHT_REQUEST, toggleLightSaga)<\/code> captures the TOGGLE_LIGHT_REQUEST<\/code> action from actions.js<\/code>.<\/li>\n\n\n\n
            • The toggleLightSaga<\/code> function runs.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • redux\/sagas.js<\/strong>:\n
                \n
              • const response = yield call(apiToggleLight, action.payload);<\/code> \u2192 The apiToggleLight<\/code> function is called to send a request to the backend.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Backend (\/api\/toggle-light)<\/strong>:\n
                  \n
                • app.post('\/api\/toggle-light', (req, res) => {...})<\/code> \u2192 The incoming request is processed, and the light status is saved.<\/li>\n\n\n\n
                • res.json({ success: true });<\/code> \u2192 A success response is returned.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                • redux\/sagas.js<\/strong>:\n
                    \n
                  • if (response.ok) { yield put(toggleLightSuccess(action.payload)); }<\/code> \u2192 When a successful response is received, the TOGGLE_LIGHT_SUCCESS<\/code> action in actions.js<\/code> is dispatched.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                  • redux\/reducer.js<\/strong>:\n
                      \n
                    • The lightReducer<\/code> captures the TOGGLE_LIGHT_SUCCESS<\/code> action from actions.js<\/code>.<\/li>\n\n\n\n
                    • The light status is updated, and the loading<\/code> status is set to false<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                    • App.js<\/strong>:\n
                        \n
                      • When the Redux state is updated, the component re-renders.<\/li>\n\n\n\n
                      • The light status and button status are updated (the text on the button changes).<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
                        <\/p>\n","protected":false},"excerpt":{"rendered":"
                        Redux-Saga Redux-Saga is a library written in JavaScript that facilitates state management and managing side effects in React applications. Here are some key points about what Redux-Saga does: Key Features…<\/p>\n","protected":false},"author":1,"featured_media":44,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,11,21],"tags":[15,14,19,22],"class_list":["post-42","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-libraries","category-react","category-react-libraries","tag-libraries","tag-react","tag-react-libraries","tag-redux"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":4,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/42\/revisions\/105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/media\/44"}],"wp:attachment":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}