在反应可观察中使用史诗的一个输出作为史诗的另一个输入答案

【问题标题】：Use one output of epic as another input of epic in react observable在反应可观察中使用史诗的一个输出作为史诗的另一个输入
【发布时间】：2017-08-24 02:37:21
【问题描述】：

我正在使用 react-observable 开发一个 react-native 应用程序。

我有两个epic，一个用来获取经纬度，另一个用来通过经纬度获取地址。

我的问题是，因为我想在一个史诗中做一件事，我怎么能使用第一个史诗的输出作为第二个史诗的输入？

const getLocationEpic = action$ =>
    action$.ofType('GET_LOCATION')
        .mergeMap(() =>
            currentPosition$()
                .map(data => ({
                    type: 'GET_LOCATION_SUCCESS',
                    data: {"latitude": data.coords.latitude, "longitude": data.coords.longitude}
                }))
                .catch(error => {
                    console.log("GET POSITION ERR", error);
                    return Observable.of({type: 'GET_POSITION_ERROR', error: error});
                })
        );

const getAddressEpic = action$ =>
    action$.ofType('GET_ADDRESS')
        .switchMap(action =>
            ajax(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}`)
                .map(data => (data))
                .do({
                    next: data => {
                        console.log("address data");
                        console.log(data);
                    }
                })
                .map(data => ({
                    type: 'GET_POSITION_SUCCESS', data: data.response.results[0].formatted_address
                }))
                .mergeMap(() =>
                    currentPosition$()
                        .map(data => ({
                            type: 'GET_ADDRESS_SUCCESS',
                            data: {"latitude": data.coords.latitude, "longitude": data.coords.longitude}
                        }))
                        .catch(error => {
                            console.log("GET_ADDRESS_ERROR", error);
                            return Observable.of({type: 'GET_ADDRESS_ERROR', error: error});
                        })
                ));

【问题讨论】：

标签： javascript react-native rxjs redux-observable

【解决方案1】：

可能是这样的：

getLocationEpic(action)
    .mergeMap( (action) => getAddressEpic(action) )
    .subscribe( (data) => {
        /* get the result from epic 1 to epic 2 */
    })

详细信息：获取getLocationEpic 的结果，然后将其展平并将结果输入getAddressEpic。订阅它以获取最终结果。

【讨论】：

【解决方案2】：

在 redux-observable 中，您的史诗会收到所有已调度动作的流——可能不明显的是其中包括由其他史诗调度的动作。这是一个非常强大的功能，因为您可以编写不需要耦合到其他史诗中的实现细节的史诗。行动就是契约。

在你的情况下，你说你想将它们排序为 1. 获取经度/纬度 2. 然后使用该经度/纬度来获取它们的地址。

您的getAddressEpic 然后只需要监听GET_LOCATION_SUCCESS 即可收到通知并接收长/纬度值。

const getAddressEpic = action$ =>
    action$.ofType('GET_LOCATION_SUCCESS') // <--- listen for location success action
        .switchMap(action =>
            // you can now use the long/lat from that action
            ajax(`${apiURL}/geocode/json?latlng=${action.data.latitude},${action.data.longitude}`)

【讨论】：

你好。这回答了你的问题吗？