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"、
問題は、アクションではなくストリームを返すことです。
オブザーバブル（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);
}),
);
}),
);
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加