首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React高级篇(二)Redux工作流(react-redux)

React高级篇(二)Redux工作流(react-redux)

作者头像
娜姐
发布2021-01-14 15:10:08
9150
发布2021-01-14 15:10:08
举报
文章被收录于专栏:娜姐聊前端娜姐聊前端

《React高级篇(一)从Flux到Redux,react-redux》文章中贴过一张redux单向数据流的图,但是,从action到reduer,其实还缺少了不少环节。

举个例子,如果发起一个异步动作(比如网络请求),该如何处理?redux单向数据流一定是同步的,碰上异步Action,必须将其转为同步Action,才可以继续走下去,否则事件会被丢失。

再比如,如果需要给每个Action都要打Log,那么,是否有个节点可以统一处理?

于是,store enhance(middleware是它的特殊实现)出现了,Action到达reducer之前,会经过一系列的enhancer处理看下图:

redux flow.png

复习:Store的创建方式

createStore(reducer, [preloadedState], [enhancer])

第三个参数即是enhancer

创建Store的enhancer

一个store对象中包含下列接口:

  • dispatch
  • subscribe
  • getState
  • replaceReducer

一般来说,自定义enhancer都是针对上述接口做能力增强,比如提供日志功能的logEnhancer,定义如下:

const logEnhancer = (createStore)  =>  (reducer,  preloadedState,  enhancer) =>  (
    const store= createStore(reducer,  preloadedState,  enhancer);
    const originalDispatch = store.dispatch;
    store.dispatch = (action) =>  {
        console.log('dispatch action:’,action);
        originalDispatch(action);
        return store;
};

增强器通常都使用这样的模式,将store上某个函数的引用存下来,给这个函数一个新的实现,但是在完成增强功能之后,还是要调用原有的函数,保持原有的功能。

store enhancer和middleware的关系?

middleware本身就是一个store enhancer,它专门负责增强redux.dispatch()方法。middleware源码示意如下:

export default function middleware(...middlewares) {
    return createStore => (...args) => 
        { // 省略 return { ...store, dispatch }
    }
}

注意:middleware应该置于enhancer队列的最前排。

分发一个action时,middleware通过next(action)一层层处理和传递action到Redux原生的dispatch。

如果某个middleware使用store.dispatch(action))分发action,会跳出middleware管道,重新再来。如下图:

redux.jpg

store.dispatch(action)的应用场景

action默认都是同步的。如果是一个异步Action(异步请求),那么需要一个专门处理异步请求的middleware,这是会用到store.dispatch()。这样,异步工作流才可以被所有中间件处理,否则,它只能被当前位置之后的中间件处理。

常用的异步流中间件处理库为redux-thunk。

const thunk = store =>next => action =>
    typeof action === 'function' ? action(store.dispatch, store.getState) : next(action)

异步Acton设计如下:发起异步请求,如果成功,弹出成功弹框,否则,弹出错误弹框。

const getThenShow = (dispatch, getState) =>{
    const url = 'http://xxx.json';

    fetch(url)
        .then(response=>{
            dispatch({
                type: 'SHOW_MESSAGE_SUCCESS',
                message: response.json
            })
        })
        .catch(error=>{
            dispatch({
                type: 'SHOW_MESSAGE_FAIL',
                message: 'error'
            })
        })
}

后记

讲redux-thunk相关的文章非常多,不再累述。

参考文章:浅析Redux 的 store enhancer,书籍-《深入浅出react和redux》

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 复习:Store的创建方式
  • 创建Store的enhancer
  • store enhancer和middleware的关系?
    • store.dispatch(action)的应用场景
    • 后记
    相关产品与服务
    消息队列 TDMQ
    消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档