redux系列之react-thunk源码解读

 阅读约 7 分钟

前言

我们知道,redux提供了一套很好的状态管理机制,通过在createStore方法创建出store对象,通过store.getState获取状态对象,通过reducer定义出action改变对应的state变化的规则,通过replaceReducer动态改变reducer规则,结合dispatch一个action来修改状态对象state,甚至,redux还提供了applyMiddleware来给redux增加中间件,提供dispatch和getState2个方法给中间件使用;

不过,redux只是一个和其他库无关的状态管理库,为了能够方便的在react中使用,我们必须结合react-redux来使用。react-redux通过Provider使用给react项目的所有子组件注入store,通过connect给组件注入state和dispatch。

但是,有了react-redux还不够!我们还需要react-thunk!

为什么需要react-thunk?

ajax请求发出去的时候,经常涉及到这3个状态:loading,success,error3个状态,而且这3个状态是在同一个地方产生的,那么,如果仅有react-thunk,那么,我们需要在组件内部这样写代码:

this.props.dispatch(loadingAction);
ajax('/getData').then(res => {
    this.props.dispatch(successAction);
}).catch(err => {
    this.props.dispatch(errorAction);
})

如果上述代码在组件内多次被调用,就需要封装成函数,getData,如果要夸页面调,那就需要封装到专门的api请求里面去,代码如下:

//api.js
export function getData(dispatch) {
    this.props.dispatch(loadingAction);
    ajax('/getData').then(res => {
        this.props.dispatch(successAction);
    }).catch(err => {
        this.props.dispatch(errorAction);
    });
}

//index.js业务组件代码
import {getData} from './api.js';
class MyComponent extends Component {
    handleClick() {
        getData(this.props.dispatch);
    }
}

并且,如果getData内部需要用到全局的state,那么,我们必须要从业务代码里面传入getState函数,那么代码就会变成下面这样:

//api.js
export function getData(dispatch, getState) {
    const state = getState();
    dispatch(loadingAction);
    ajax('/getData').then(res => {
        dispatch(successAction);
    }).catch(err => {
        dispatch(errorAction);
    });
}

//index.js业务组件代码
import {getData} from './api.js';
class MyComponent extends Component {
    handleClick() {
        getData(this.props.dispatch, this.props.store.getState);
    }
}

似乎这样也行,但是,总感觉不对,每次都要从业务组件里面显式的传入2个参数dispatch和getState,这样感觉很烦。
所以呢,通过以上分析,我们react-thunk就闪亮登场了!

react-thunk怎么用?

//store.js
import thunk from 'redux-thunk';
const initialState = {};
const reducer = function(state={}, action){ return state };
const store = createStore(reducer, initialState, applyMiddleware(thunk));

//action.js
export function getData(dispatch, getState) {
    const state = getState();
    dispatch(loadingAction);
    ajax('/getData').then(res => {
        dispatch(successAction);
    }).catch(err => {
        dispatch(errorAction);
    });
}

//index.js业务组件代码
import { getData } from './actions.js';

class MyComponent extends Component {
    handleClick() {
        getData();
    }
}

这样,使用了react-thunk之后,我们无需从getData中传入dispatch和getState,而是中间件会默认帮我们做这个事情,这样,我们就可以在一个函数内部dispatch多个action,以及随意的拿到全局的state

react-thunk怎么实现的?

看源码:

//一个创建thunk的中间件工厂函数
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}
//创建出thunk中间件
const thunk = createThunkMiddleware();
//把工厂函数附属到thunk对象上,方便高级用户自定义传入更多的参数到action中去
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

其实,就是一个中间件的写法,当发现action是一个函数的时候,就会传入dispatch和getState这2个参数,而这2个参数是从中间件那里传过来的。

全文完

阅读 844发布于 2018-11-18
推荐阅读

2487 人关注
172 篇文章
专栏主页
目录