redux-promise解析

redux-promise

解析这个中间的用法,以及原理

源码

import isPromise from 'is-promise';
import { isFSA } from 'flux-standard-action';

export default function promiseMiddleware({ dispatch }) {
    return next => action => {
        /**
         * 判断是不是标准的FSA
         */
        if (!isFSA(action)) {
            /**
             * 判断是不是promise,
             * 如果是则执行,只会处理resolve的值,
             * 反之交给下一个中间件
             */
            return isPromise(action) ? action.then(dispatch) : next(action);
        }

        // 是标准的FSA, 判断是不是一个promise
        return isPromise(action.payload)
            /**
             * 1.promise的时候,执行then,同时捕获异常,
             * 在处理这两种情况以后,会分别添加另外一个约束error
             *  这我们需要在reducer里面还需要判断error的值,
             * 做不同的处理
             * 
             * 2. 如果不是promise则交给下一个中间件
             * 
             * */
            ? action.payload
                .then(result => dispatch({ ...action, payload: result }))
                .catch(error => {
                    dispatch({ ...action, payload: error, error: true });
                    return Promise.reject(error);
                })
            : next(action);
    };
}

用法

虽然官方文档上面并没有举例是如何使用(至这篇文章编写时),但其实文档中已经说明的很清晰了,主要分为以下两种情况:

  • 1.当中间接收到的是一个Promise实例,会dispatch掉resoved的值,对于reject的结果并不做任何处理。举例来说:

      const testRes = () => {
          return new Promise((res, rej) => {
              res({
                  type: 'TEST_RESOLVE'
              })
          });
      }
      store.dispatch(testRes());
    
      const testRej = () => {
          return new Promise((res, rej) => {
              rej({
                  type: 'TEST_REJECT'
              })
          });
      }
      store.dispatch(testRes());
    

    上面的两个例子,只有第一个会直接dipatch,第二个不会有任何操作,其实查看源码就知道

      if (!isFSA(action)) {
          return isPromise(action) ? action.then(dispatch) : next(action);
      }
    

    action.then只接收了一个函数,所以不会处理reject的值,不过从几行代码,我们还可以得到几点信息。

    • 中间件内部是会自动地帮我们调用dispatch
    • resolve的值会被当做diapatch的参数被重新分发
    • resolve的值并不会继续流转到交给下一个中间件了
  • 2.当中间件接收的是一个符合FSA的action,会接着判断action.payload是不是一个promise,如果不是则直接转给下一个中间件,是则调用then,同时使用catch捕获异常,这里出现两种情况,查看源码:

        action.payload
            .then(result => dispatch({ ...action, payload: result }))
            .catch(error => {
                dispatch({ ...action, payload: error, error: true });
                return Promise.reject(error);
            })
    
    • promise的状态变成resolved的时候回进入then里面,并且重新dispatch(action)
    • promise的状态变成rejected的时候回进入catch里面,并且重新dispatch(action), 同时会在action里面加一个error

    从上面两种情况来看,当action.payload为promise的时候,会被重新分发,并且不会走到下一个中间件。

建议

从上面的源码我们看出:
源码简单易懂,使用promise来解决异步,省去了额外的学习成本。但是同样由于过于简单,无法完成我们项目中一些特定的需求,比如我们想请求一个列表数据,在请求的时候我们想做一些loading的动画,由于这个中间件是直接拦截掉action, 并最终经过判断处理同样只会分发一次,这样在解决上面的应用场景中,不是很适合,同样我们判断请求成功或者失败的时候需要额外的判断error,其实是增增加了额外的约束。

你可能感兴趣的:(redux-promise解析)