Getting Actions必须是我的redux-observable史诗中的普通对象错误

Question

所以我有一个像这样使用fromFetch的api：

const myApi = () => {
  const data$ = fromFetch(url);
  return data$;
}

我的史诗看起来像这样：

export const fetchEpic = (action$: any) => {
  return action$.pipe(
    ofType(Actions.FETCH),
    mergeMap(action =>
      myApi().pipe(
        map(result => {
          console.log(result)
          return mapTo({ type: Actions.ADD_ITEMS, payload: result });
        }),
      ),
    ),
  );
};

console.log（result）似乎正常运行，没有问题。但是我得到了错误：

Error: Actions must be plain objects. Use custom middleware for async actions.

作为旁注，我尝试进行一些基本测试，并在下面进行了测试，因此效果很好，为什么上面的史诗功能不起作用？

export const fetchEpic = (action$: any) => {
  return action$.pipe(
    ofType(Actions.FETCH),
    mapTo({ type: Actions.ADD_ITEMS, payload: ['hello'] })
  );
};

使用相同的错误制作了上述代码和框：https://codesandbox.io/s/agitated-visvesvaraya-b8oun

Answer 1

在map块中，您应该直接返回操作。您的代码将其包装为mapTo，该运算符仅应在pipe方法内部使用。因此，您的fetchEpic应该是：

export const fetchEpic = (action$: any) => {
  return action$.pipe(
    ofType(Actions.FETCH),
    mergeMap(action =>
      myApi().pipe(
        map(result => {
          console.log(result)
          return{ type: Actions.ADD_ITEMS, payload: result };
        }),
      ),
    ),
  );
};

由于您已经在使用TypeScript，所以我发现，如果您正确键入史诗，例如，TypeScript编译器实际上可以发现许多此类错误。

export const fetchEpic : Epic<YourActionType, YourActionType, YourStateType> = (action$) => { ..