我是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”,
问题是您要返回流而不是操作。
如果你返回一个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);
}),
);
}),
);
};