我如何在redux-observable中使用“of”

问题描述 投票:1回答:1

我是Redux-Observable的新手。所以,我在我的项目中应用了redux-observable,我想通过redux-observable调度动作,所以我使用了“of”(比如之前的RXJS版本中的Observable.of())。但我收到的反应是“操作必须是普通对象。使用自定义中间件进行异步操作”。我的设置史诗中间件或代码有问题吗?

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”,

reactjs redux-observable
1个回答
1
投票

问题是您要返回流而不是操作。

如果你返回一个observable(of(yourAction)),你需要使用mergeMap来展平它

如果你返回动作,那么你可以使用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);
                }),
              );
          }),
        );
    };
© www.soinside.com 2019 - 2024. All rights reserved.