Question

我正在使用redux-observable和redux进行异步操作。在epic的map运算符里面，我正在进行一些预处理，因为它是中心位置。

我的应用程序从具有不同值的多个容器组件调用相同的操作。

所以基本上我必须取消我的ajax请求/下一个操作符执行，如果deepEqual(oldAtts, newAtts)是true

代码 -

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))
    );
}

不确定它是否正确地从史诗中做到了。提前谢谢。

Answer 1

你可以这样做：

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 => ...);
}

但很可能你不需要将atts保存到州进行比较：

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 => ...);
}

Redux observable取消下一个操作员执行？

1 个答案: