数据不会从史诗到减速器

Question

如果你们中的任何人看到这个，我有一个问题，我是 redux 的新手，我来自角度和服务逻辑，所以我有点知道 redux 是如何工作的。我只使用了 2 个史诗侦听器（一个用于从服务调用 GET 方法，一个用于 POST）+ 服务（用于从 api 获取数据）。因此，每当我必须调用任何 api 时，我都会使用一些 api 配置创建一个对象，包括 url、param 以及是否在 api 中包含授权标头现在事情是当我一次调度一个动作但当我已经执行多个操作意味着多次获取或发布它在完成所有服务和史诗工作后停止在史诗中，并且不会去减速器存储数据并给我错误。 Actions must be plain objects. Use custom middleware for async actions 我知道我的实现有问题。如果它以这种方式工作，那就太好了，否则我必须转移到其他服务，如 thunk 或其他东西。

 `
GetEpic = (action$) =>
            action$.ofType(Action.Get)
                .switchMap(({ payload }) => {
                    let { api, param, reqHeader, waitFor } = payload;
                    delete payload.api;
                    delete payload.param;
                    delete payload.reqHeader;
                    return HttpService.post(api, param, reqHeader, payload).then((userInfo) => {
                        if (userInfo.status && userInfo.status != 200) {
                            return {
                                type: 'ERROR'
                            }
                        }
                        return this.translateDataAndReturnType(userInfo, api, 'get', waitFor);
                    }).catch(() => {
                        return {
                            type: 'ERROR'
                        }
                    })
                })

translateDataAndReturnType(data, api, method, waitFor) {
        if (data && api) {
            this.count += 1;
            let actionInfo = this.routesData.find((d, i) => {
                return d.route == api
            })
            let routeAction = Object.assign({}, actionInfo);
            routeAction.payload = data;
            this.localDate[routeAction.route] = data;
            delete routeAction.route;
            if (typeof waitFor == 'number') {
                this.waitFor = waitFor;
                this.count = 0;
                this.count += 1;
            }
            if (this.count == this.waitFor) {
                routeAction.payload = this.localDate;
                if (this.actions) {
                    routeAction.type = this.actions;
                }
                return routeAction;
            }
        }
    }
`

已更新答案
我做错了什么是试图一次从我的组件中获得多个动作的响应，这是不可能的，所以我改变了我的策略，将单个动作与多个 api 一起使用，因为我创建了一个带有路由和 api 的 json

`this.routeConfig = {
  "countriesCitesTimezone": [
                { route: 'countries', type: 'SUCCESS-COUNTRIES', param: '', reqHeader: false },
                { route: 'cities', param: '', reqHeader: false },
                { route: 'timezone', param: '', reqHeader: false }
            ]
}`  

所以每当我必须调用一个动作时，我都会使用一些配置来调用该动作，例如

`var apiInfo = {
      route: 'countriesCitesTimezone',
      params: []
    }
    this.props.registration(apiInfo)`  

然后由史诗处理

`GetEpic = (action$) =>
            action$.ofType(Action.Get)
                .switchMap(({ payload }) => {
                   let requests = this.routesConfig[payload.route];
                   return Observable.forkJoin(
                    requests.map((d, ind) => {
                        let param = d.param;
                        if (payload.params.length > 0) {
                            param = payload.params[ind];
                        }
                        return (HttpService.get(d.route, param, d.reqHeader));
                    })
                ).map((x) => {
                    console.log(x);
                    let result = {};
                    requests.map((d, ind) => {
                        result[d.route] = x[ind]
                    })
                    return ({
                        type: requests[0].type,
                        payload: result
                    })
                })
                })`

Answer 1

我认为您正在寻找的是 mergeMap 而不是 switchMap。

switchMap 将：

将每个源值投影到一个 Observable 中，该 Observable 合并到输出 Observable 中，仅从最近投影的 Observable 发出值。

因此，当使用switchMap() 时，Action.Get 类型的每个新操作都将阻止发出先前服务调用的响应（如果它仍处于挂起状态）。

另外，假设您的服务调用返回Promise，您应该考虑将HttpService.post() 调用包装在Observable.fromPromise() 中。我相信您收到 Actions must be plain objects... 错误的原因是因为您正在发出 Promise，然后将其发送到商店。