关于在mobx中显示异步操作的三个状态(开始,加载中,结束)和redux的对比

@ckinmind 2017-03-07 03:59:50发表于 ckinmind/ReactCollect

问题背景:比如有一个按钮,触发一个异步请求,需要在按钮上显示初始文字(比如加载),然后正在加载中的文字(比如加载h'zo),最后请求成功后恢复初始文字

1. redux的处理方式

在redux中,需要3个action(包含一个失败处理), 3个reducer的判断,比如在发送异步请求前,发送一个开始加载的action, 最后更新状态,比如在触发按钮上显示正在加载文字,异步请求成功后,在异步请求的回调中发送一个成功的action, 然后更新视图,将按钮文字修改回初始的文字,这个是在redux中的做法

2. mobx中的做法

在一个异步action中解决这个问题,设置一个 @observable buttonText = '加载';,在action中,异步请求之前直接改变this.buttonText='加载中',异步请求成功的回调中也直接修改内容,这是mobx中的做法,确实很简洁