redux知多少?

好久没有面试后,突然被问到,redux常用的方法有哪些?吞吞吐吐说,createStore,applyMiddleWare,其他想不起来了,大写的尴尬......

常用方法
  • createStore
  • applyMiddleware
  • combineReducers
  • bindActionCreators
  • compose
const createStore = (reducer, preloadedState, enhancer) =>{
    if(enhancer){
        // 加强store.disptach
        return enhancer(createStore)(reducer, preloadedState)
    }
    let currentState;
    const currentListeners = [];
    // redux获取state的方法
    const getState = () =>{
        return currentState;
    }   
    // redux触发方法
    const dispatch = (action) =>{
        // reducer接收prevState,action,返回新的state
        currentState = reducer(currentState, action)
        // 遍历执行listener
        currentListeners.forEach(listener=> listener())
    }
    // 订阅state改变
    const subscribe = (listener) =>{
        currentListeners.push(listener)
            // 有订阅就需要有取消订阅
        return ()=>{
            // 也可以使用filter把要取消的过滤掉
            currentListeners = [];
        }
    }
    // 初始化initState,源码中也是随机生成一个字符串,手动执行dispatch
    dispatch({type:'redux/init'})
    return {
        getState,
        dispatch,
        subscribe,
    }
}
// 中间件,加强dispatch,如redux-thank,redux-logger,redux-promise
const applyMiddleware = (middlewares) =>{
    return (createStore) => (reducer, preloadedState, enhancer)=>{
        const store = createStore(reducer, preloadedState, enhancer);
        const dispatch = store.dispatch;

        const midlewareAPI = {
            getState: store.getState,
            dispatch: (action)=>dispatch(action)
        }

        const chains = middlewares.map(middleware=>middleware(midlewareAPI))
        dispatch = compose(...chains)(store.dispatch)
        return {
            ...store,
            dispatch,
        }
    }
}
// 其中包含多个reducer函数作为输入,并返回一个新的root reducer函数。
const combineReducers = (reducers) =>{
    // combineReducers 函数接受一个对象,
    return function combination(state = {}, action){
        const nextState = {};
        const hasChanged = false;
        for(let key in reducers){
            const reducer = reducers[key]
            nextState[key] = reducer(state[key], action)
            hasChanged = hasChanged || nextState[key] !== state[key]
        }
        // 兼容reducer数量改变
        hasChanged = hasChanged || Object.keys(nextState).length !== Object.keys(state).length
        return hasChanged ? nextState : state;
    }
}
// 聚合函数:一个值经过多个函数处理,才能返回最终的值,就需要聚合函数compose
const compose = (...funcs) =>{
    if(funcs.length === 0) return args => args;
    return funcs.reduce((a,b)=>(...args)=>a(b(args)))
}

// 辅助函数,将对象转换为函数
const bindActionCreator = (actionCreator, dispatch) =>{
    return function(){
        return dispatch(actionCreator)
    }
}

// actionCreator
const bindActionCreators = (actionCreators, dispatch) =>{
    // actionCreators是一个对象,比如{add: ()=>{}}
    if (typeof actionCreators === 'function') {
        // 如果是函数,直接执行就可以
        return bindActionCreator(actionCreators, dispatch);
    }
    let boundActionCreators = {};
    for (const key in actionCreators) {
        const actionCreator = actionCreators[key]
        if(typeof actionCreator === 'function'){
            boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
        }
    }
    return boundActionCreators;
}

export {
    createStore,
    applyMiddleware,
    combineReducers,
    compose,
    bindActionCreators,
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容