Middleware 可以用来增强Redux Store 的 dispatch 方法,但是也仅仅限于 dispatch 方法(也就是从dispatch函数调用到action对象被reducer函数处理这个过程中的操作)。

若想对redux Store 进行更深层次的增强定制,就需要使用Store Enhancer。applyMiddleware函数的返回值被作为增强器传入createStore,所以其中间件功能实质是利用增强器来实现的(即一个弱化版的增强器)。利用Store Enhancer 可以对redux Store进行各个方面的增强。

//一个什么都不做的Store Enhancer
const doNothingEnhancer = (createStore) => (reducer, preloadeState, enhancer) => {
    const store = createStore(reducer, preloade);
    return store;
}

实现一个Store Enhancer,功夫全在于如何定制产生的store对象。

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

  • dispatch
  • subscribe
  • getState
  • replaceReducer

每一个接口都可以被修改,但是无论如何修改,最后往往都还是要调用原有对应的函数

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

//rest 增强器实现完成替换reducer和状态的功能

const RESET_ACTION_TYPE = '@@RESET';

const resetReducerCreator = (reducer, resetState) => (state, action) => {
    if(action.type === RESET_ACTION_TYPE){
        return resetState;
    }else{
        return reducer(state,action);
    }
}

const reset = (createStore) => (reducer, preloadeState, enhancer) => {
    const store = createStore(reducer, preloadeState, enhancer);

    const reset = (resetReducer, resetState) => {
        const newReducer = resetReducerCreator(resetReducer, resetState);
        store.replaceReducer(newReducer);
        store.dispatch({type:RESET_ACTION_TYPE, state:resetState});
    };

    return {
        ...store,
        reset
    };
};

export default reset;

results matching ""

    No results matching ""