CODEWITHSUNDEEP
reactjsreduxreact-reduxrxjsredux-observable
hex0x02
hex0x02

Reputation: 33

How to emit event each action

I am an entry level developer of RxJS , I use react, redux, react-redux, redux-observable, above of all in my side project;

but I can not figure out , why can not my epic code blocks work as I want , hopes somebody helps my out.

/* store actions */

export const ACTION_1 = 'ACTION_1';
export const ACTION_2 = 'ACTION_2';
export const ACTION_3 = 'ACTION_3';

/* store reducer */
import * as actionTypes from 'actions.js';

const someInitialState = {};

const reducer = (state = someInitialState , action) => {

    switch(actionTypes.ACTION_1){
        case(actionTypes.ACTION_1):{
            return {
                ...state,
                /*do something...*/
            }
        }
        case(actionTypes.ACTION_2):{
                /*do something...*/
        }
        case(actionTypes.ACTION_3):{
                /*do something...*/
        }
    }
}

/* actionEpic.js */

import * as actionTypes from 'actions.js'


const actionEpic = (action$ , store$) => {
    retrun action$.pipe(

        ofType(actionTypes.ACTION_1),
        map( () => ({type : actionTypes.ACTION_2}) ),
        map( () => ({type : actionTypes.ACTION_3}) ),

    )
}

This is a pseudo code , so please ignore the detail syntax and structure.

My Question is Why in my actionEpic epic , the first action 1 and last action 3 will be emitted and works fine, but the action 2 in between always be ignored , never emit.

what if I want to emit these 3 action ,one by one , how to do it?

could somebody helps me, and sorry about the english grammar problems around my post, thx a lots.

Upvotes: 3

Views: 599

Answers (1)

Oles Savluk
Oles Savluk

Reputation: 4345

You can emit both actions using flattening operators, for example mergeMap, so your code would be something like:

const { of } = rxjs; // = require("rxjs")
const { filter, mergeMap } = rxjs.operators; // = require("rxjs/operators")


const actionEpic = (actions$) => {
  return actions$.pipe(
    filter(a => a.type === "ACTION_1"),
    mergeMap(() => [
      { type: "ACTION_2" },
      { type: "ACTION_3" }
    ])
  )
}

const actions$ = of({ type: "ACTION_1" });
actionEpic(actions$).subscribe(e => console.log(e));
<script src="https://unpkg.com/[email protected]/bundles/rxjs.umd.min.js"></script>

Upvotes: 1

Related Questions