关于课程里对异步action封装的问题?

来源:9-6 组件开发:其他组件

Jeffacode

2019-02-18

看到第十章代码了,发现middleware/api.js还是只对GET做了一个封装而已,简单来说,就是由原先发一个异步action,变成发一个同步action,然后在到达reducer前被拆成了3个actions,在异步的不同阶段有选择地dispatch。问题是,还有POST、PATCH和DELETE请求呢?我估摸着应该还要做类似的封装,好像也很啰嗦。。。不过这还不是问题所在,真正的问题是:在发了一个action后,假设请求成功了,我还想拿请求回来的数据里的某个字段再发一个action怎么办?换句话说,这种封装方法把整个异步流都放进了middleware里,我们接触不到了!但明明异步流应该是留给我们来掌控的啊?

写回答

1回答

艾特老干部

2019-02-18

你好,课程中的api 中间件只是封装了常用的异步流程,而且中间件只是简化了调用代码和预处理了返回的数据的结构,返回数据你依然是可以获取到的,并不是接触不到的。

例如,home.js加载特惠商品的action creator,如果想根据返回的数据继续发送其他action,可以参考如下:   

loadDiscounts: () => {
    return (dispatch, getState) => {
        const {ids} = getState().home.discounts
        if(ids.length > 0) {
            return null;
        }
        const endpoint = url.getProductList(
            params.PATH_DISCOUNTS,
            0,
            params.PAGE_SIZE_DISCOUNTS
    );
    return dispatch(fetchDiscounts(endpoint)).then(data => {
        // 发送新的action, data.response中包含api调用返回的数据
        return dispatch(anotherAction(data.response)) 
    });
    };
}

如果有特殊场景,api中间件无法满足需求,可以直接redux-thunk发送异步流,跳过api中间件的处理,只要action中没有FETCH_DATA属性,就不会被api中间件处理。


1
1
Jeffacode
明白了,我对这个中间件的理解有点偏差,谢谢老师!
2019-02-18
共1条回复

React16+Redux实战企业级大众点评Web App

从架构设计到部署上线,带你学习React技术栈与核心思想

1071 学习 · 306 问题

查看课程