Trigger action at the conclusion of saga using redux-observables

How can I dispatch an action of a different type in Redux Observables, instead of ApplicantAction, because I need the data passed in the response?

const updateApplicantEpic: Epic<ApplicantAction, ApplicantAction, State> = action$ =>
  action$.pipe(
    filter(isOfType(EApplicantAction.UpdateApplicant)),
    mergeMap(action =>
      from(
        createAxiosInstance().put(`/applicant/edit/${action.applicantId}`, action.applicant),
      ).pipe(
        map(({ status }) => updatedApplicant(status, action.applicant)),
        startWith(updatingApplicant()),
        catchError(({ response }) => of(updatingApplicantFailed(response.status))),
      ),
    ),
  );

I want to trigger the setNotification() action with this specific data:

{
   id: action.notificationId,
   status: response.status
   title: response.data.title,
   message: response.data.messages?.join('\n'),
   open: false
}

This is how my second action would look like:

const setNotificationEpic: Epic<NotificationAction, NotificationAction, State> = action$ =>
  action$.pipe(
    filter(isOfType(ENotificationAction.SetNotification)),
    map(action => setNotificationSuccess(action.notification)),
  );

Answer №1

If you're looking for ways to trigger a second action, the approach can vary depending on your specific needs. One method is to use the mergeMap operator to handle multiple actions following an event. Below is a modified version of the epic example provided:

const updateApplicantEpic: Epic<ApplicantAction, ApplicantAction, State> = action$ =>
  action$.pipe(
    filter(isOfType(EApplicantAction.UpdateApplicant)),
    mergeMap(action =>
      from(
        createAxiosInstance().put(`/applicant/edit/${action.applicantId}`, action.applicant),
      ).pipe(
        mergeMap((response) => of(
          updatedApplicant(response.status, action.applicant),
          setNotification(response),
        )),
        startWith(updatingApplicant()),
        catchError(({ response }) => of(updatingApplicantFailed(response.status))),
      ),
    ),
  );

In this scenario, it's assumed that there exists an action creator function called setNotification, which takes an axios response as input and returns an action. The TypeScript signature might resemble the following:

setNotification(response: Response): NotificationAction

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Leaflet JS to add custom external controls to your map

Is there a way to implement external controls for zooming in on an image? I've searched through the documentation, but haven't been able to find a clear solution. HTML: <div id="image-map"></div> <button id="plus">+</butto ...

Dynamically populate a SAPUI5 form with labels and input fields, assigning unique IDs to the input fields without implementing any

While developing my application, I encountered a challenge with enabling users to dynamically add new labels and inputs into a form. The issue arises when the id for the new input is set as disabled by the user, but upon clicking the edit button, the enabl ...

Implementing a Vue.js search function with two v-for loops

I have computed the following filter: <script> export default { data() { return { columns:{}, search:"", trovato:{}, }; }, computed: { ...

The error message 'ReferenceError: MouseEvent is not defined' indicates that

Recently, I attempted to incorporate ng2-select into a project that relies on angular/universal-starter (TypeScript 2.x) as its foundation. (Interestingly, ng2-select worked perfectly fine when added to an angular-cli generated project.) However, upon ad ...

Prevent ng-click from functioning in AngularJS when a specific variable is met

<span class="column__list--total fa" ng-class="{'fa-check': skill.done == 1, 'fa-times red': skill.done == 0}" ng-click="skill.disabled || toggleSkill(skill.id, person.id)" ng-hide="$root.user[0].auth == 2"></span> <span ...

What potential drawbacks come with utilizing the OOP approach in both JavaScript and React?

While working on an internal project, I found myself creating a base system and implementing a custom form structure using TypeScript with an OOP approach. class Form extends React.Component {} abstract class FormElement extends React.Component<{valid ...

Retrieve information from the previously selected option in a dropdown menu, along with information from the currently selected option

Dealing with variable scoping in JavaScript can be a bit tricky. I've experimented with various methods like using window.var or declaring variables inside and outside of functions, but nothing seems to work. Here's the scenario: $(".some_field" ...

What sets apart async(req,res,next) from async(req,res,()=>{}) is the way they handle asynchronous operations within a

Upon reviewing this code snippet, I have noticed that the next function is absent from the protect function within the protectandauth function. This omission raises questions about the distinction between protect = async(req, res, next) and protect = async ...

PHP versus JavaScript: A Comparison of XML Parsing Performance

As I delve into creating a flickr plugin for WordPress, I can't help but notice the performance difference between the PHP and Javascript scripts I've written. Interestingly, my JavaScript code seems to be running faster than its PHP counterpart. ...

The attribute 'value' is not present in the object of type 'Readonly<{}>'

My current project involves creating a form that will dynamically display content based on the response from an API. The code I am working with is structured as follows: class Application extends React.Component { constructor(props) { super(props); ...

Error message: The specified expression cannot be built using Google OAuth authentication in a Node.js environment

I'm currently working on integrating my NodeJS API, which was developed in TypeScript, with Google Oauth2 using Passport. However, when following the documentation written in JavaScript, I encountered an error underlining GoogleStrategy. This expressi ...

What steps should I take to troubleshoot and fix this issue with the pdf-generation

I am new to this field and currently working on developing a PDF generator web application with express.js using the html-pdf package. I have a condition based on the engagement variable. module.exports = ({rs, periode, engagement, siren, num, rue, codePos ...

repeated execution of a javascript function

I have created a tag picker that generates checkbox inputs based on the "group" selected. After selecting the desired tags and pressing the done button, it should return a string to set the value of a text input. Below are some related code snippets. The ...

Uniting arrays of objects in Javascript

My attempt to create a deck of cards is resulting in an array filled with undefined objects. Each card in the deck should be represented as an array element with suit and value attributes, but something seems off in how the arrays are coming together. I w ...

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

Making retries with the RetryWhen filter in Angular 2 RxJS Observables when encountering errors in the status

I'm currently working with the Angular 2 HTTP library, which returns an observable. I'm trying to set up a retry mechanism for specific error statuses/codes. The problem I'm facing is that when the error status is not 429, Observable.of(err ...

Managing 404 errors when loading cached scripts with jQuery

I need to load a JS file using jQuery, but I want the cache to be used if available. Unfortunately, I can't set the global ajax cache setting to true for reasons beyond the scope of this post. This means using the getScript method is not an option. Fo ...

What is the best way to create a loop with JSON data?

My challenge is to showcase json data using a loop. I have received the following results, but I am unsure of how to display them with a loop. [ {"latitude":"23.046100780353495","longitude":"72.56860542227514"}, {"latitude":"23.088427701737665"," ...

Learn how to iterate over an array and display items with a specific class when clicked using jQuery

I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...

How to capture a change event in a dynamically loaded element using JQuery

I am facing an issue with dynamically added rows in my table. Each row contains a select option, and I need to trigger an action when the select is changed. However, since the rows are loaded after the page load, my function does not work as expected. < ...