Redux源码了解一下-白红宇

开始阅读前先回顾一下Redux的几个基本的API

const store = createStore(reducer)

store.dispatch(action)发起一个动作让reducer匹配

const state = store.getState()获取当前的state

store.subscribe(listener)添加监听,每次dispatch都会触发监听函数

bindActionCreators(actions,dispatch)

具体的调用

const reducer = (state=initialState,action){    switch(action.type){        case add:            return state+1;        case delete:             return state-1;        default:            return 0;    }}const store = createStore(reducer)const state = store.getState()const listener = () =>{    console.log(`现在有${store.getState()把枪}`)}store.subscribe(listener);store.dispatch({
   type:add})复制代码

Redux/createStore的简单实现

先理清思路

createStore函数创建的对象有getState、dispatch、subscribe方法

创建完就可以获取到初始值default，那么在内部是不是就默认dispatch了一个特别特别特殊的action，来区别用户的action.type

每次dispatch都会触发subscribe订阅的监听函数

export function createStore(reducer){    let currentState = {};  // 注意这里,在后面的react-redux源码中应该判断是否为空来返回initialState    let currentListeners = [];    // getState比较简单就是返回当前state就行了    function getState(){        return currentState;    }    // 每订阅一个监听函数就推到监听函数数组里面    function subscribe(listener){        currentListener.push(listener);    }    /*    *   最主要就是dispatch如何实现了    *   1. 首先是要改变state对吧？    *   2. 然后要触发listener    *   3. 返回一个action对象    */    function dispatch(action){        currentState = reducer(currentState,action);        currentListeners.forEach(v=>v())        return action    }    // 这里手动dispatch一个动作来返回初始state    dispatch({
   type:'@huangbin-redux-study'})    return {getState,subscribe,dispatch}}复制代码

bindActionCreator实现：其实就是给action绑定上dispatch

// function bindActionCreator(action,dispatch){
    //     return (...args)=> dispatch(action(...args))// }export function bindActionCreators(actions,dispatch){    const bound = {}; // 绑定后的    Object.keys(actions).forEach(item=>{        // bound[item] = bindActionCreator(actions[item],dispatch)        bound[item] = (...args) =>dispatch(actions[item](...args));    })    console.log(bound);    return bound;}复制代码