CODEWITHSUNDEEP
reduxredux-observable
Mohan Dere
Mohan Dere

Reputation: 4597

Redux observable cancel next operator execution?

I am using redux-observable with redux for async actions. Inside epic's map operator i am doing some pre processing because its the central place.

My app calling same action from multiple container components with different values.

So basically i have to cancel my ajax request/next operator execution if deepEqual(oldAtts, newAtts) is true

code - 

export default function getProducts(action$, store) {
  return action$.ofType(FETCH_PRODUCTS_REQUEST)
    .debounceTime(500)
    .map(function(action) {

      let oldAtts = store.getState().catalog.filterAtts
      let newAtts = Object.assign({}, oldAtts, action.atts)

      if (deepEqual(oldAtts, newAtts)) {
        // Don't do new ajax request
      }

      const searchString = queryString.stringify(newAtts, {
        arrayFormat: 'bracket'
      })

      // Push new state
      pushState(newAtts)

      // Return new `action` object with new key `searchString` to call API
      return Object.assign({}, action, {
        searchString
      })

    })
    .mergeMap(action =>
      ajax.get(`/products?${action.searchString}`)
      .map(response => doFetchProductsFulfilled(response))
      .catch(error => Observable.of({
        type: FETCH_PRODUCTS_FAILURE,
        payload: error.xhr.response,
        error: true
      }))
      .takeUntil(action$.ofType(FETCH_PRODUCTS_CANCEL))
    );
}

Not sure whether its right way to do it from epic. Thanks in advance.

Upvotes: 2

Views: 164

Answers (1)

dkl
dkl

Reputation: 3942

You can do this:

export default function getProducts(action$, store) {
  return action$.ofType(FETCH_PRODUCTS_REQUEST)
    .debounceTime(500)
    .map(action => ({
        oldAtts: store.getState().catalog.filterAtts,
        newAtts: Object.assign({}, oldAtts, action.atts)
    }))
    .filter(({ oldAtts, newAtts }) => !deepEqual(oldAtts, newAtts))
    .do(({ newAtts }) => pushState(newAtts))
    .map(({ newAtts }) => queryString.stringify(newAtts, {
        arrayFormat: 'bracket'
    }))
    .mergeMap(searchString => ...);
}

But most likely you do not need to save the atts to state to do the comparison:

export default function getProducts(action$, store) {
  return action$.ofType(FETCH_PRODUCTS_REQUEST)
    .debounceTime(500)
    .map(action => action.atts)
    .distinctUntilChanged(deepEqual)
    .map(atts => queryString.stringify(atts, { arrayFormat: 'bracket' }))
    .mergeMap(searchString => ...);
}

Upvotes: 2

Related Questions