我如何在 redux-observable 中使用 "of"

Question

我是 Redux-Observable 的新手。所以，我在我的项目中应用了 redux-observable，我想通过 redux-observable 来调度动作，所以我使用了 "of"（就像之前 RXJS 版本中的 Observable.of()）。但是我收到的回复是 "Actions must be plain objects. Use custom middleware for async actions"。我设置的史诗中间件或代码有问题吗？

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic } from './epics';
import reducers from './reducers';

const epicMiddleWare = createEpicMiddleware();
const configureStore = () => {
  const store = createStore(
    reducers,
    compose(
      applyMiddleware(epicMiddleWare),
      window.devToolsExtension ? window.devToolsExtension() : (f) => { return f; },
    ),
  );

  epicMiddleWare.run(rootEpic);

  return store;
};

export default configureStore;

epic.js

export const fetchNavigationEpic = (action$) => {
  return action$
    .ofType(actionTypes.FETCH_NAVIGATION_LIST)
    .pipe(
      mergeMap(() => {
        return from(CreateService(SettingService).getAll())
          .pipe(
            map((response) => {
              if (response.status === 200) {
                return of(fetchNavigationSuccess(response));
              }

              return fetchNavigationFailed(response);
            }),
          );
      }),
    );
};

action.js

export const fetchNavigation = { type: actionTypes.FETCH_NAVIGATION_LIST };
export const fetchNavigationSuccess = (payload) => {
  return { type: actionTypes.FETCH_NAVIGATION_LIST_SUCCESS, payload };
};
export const fetchNavigationFailed = (payload) => {
  return { type: actionTypes.FETCH_NAVIGATION_LIST_FAILED, payload };
};

图书馆信息： "redux-observable": "^1.0.0", "rxjs": "^6.2.1", "rxjs-compat": "^6.2.1",

Answer 1

问题是您 return 是一个流而不是一个动作。

如果您 return 是一个可观察对象（属于（yourAction）），您需要使用 mergeMap

将其展平

如果您是 return 操作者，那么您可以使用 map 而不是 mergeMap

所以要么

export const fetchNavigationEpic = (action$) => {
  return action$
    .ofType(actionTypes.FETCH_NAVIGATION_LIST)
    .pipe(
      mergeMap(() => {
        return from(CreateService(SettingService).getAll())
          .pipe(
            mergeMap((response) => {
              if (response.status === 200) {
                return of(fetchNavigationSuccess(response));
              }

              return of(fetchNavigationFailed(response));
            }),
          );
      }),
    );
};

或

export const fetchNavigationEpic = (action$) => {
      return action$
        .ofType(actionTypes.FETCH_NAVIGATION_LIST)
        .pipe(
          mergeMap(() => {
            return from(CreateService(SettingService).getAll())
              .pipe(
                map((response) => {
                  if (response.status === 200) {
                    return fetchNavigationSuccess(response);
                  }

                  return fetchNavigationFailed(response);
                }),
              );
          }),
        );
    };

我如何在 redux-observable 中使用 "of"

How can i use "of" in redux-observable

reactjs

redux-observable