Redux实现原理

不同组件需要依赖同一个数据的时候，就需要状态提升至这些组件的根组件。

redux是状态统一管理工具，需要使用它的原因是： 组件之间通信统一管理，方便代码维护。

React中有一个特性context,只要某个组件使用context存储了数据，那么这个组件的所有子组件都可以访问该context内容，并且还可以修改它。就像是这个组件的全局变量，它的所有子组件都可以访问这个全局变量。

如下图，假设要更改主题颜色，那么在Index根组件的context中存储当前主题色，那么它的子组件header,footer,title,menu都可以访问到，并且可以修改。

Redux的统一数据管理，与React的关联之处利用的就是context特性

但是context有一个缺点就是，所有的子组件都可以修改共享的内容，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。所以React团队的做法就是，提高修改的门槛，修改数据时统一调用dispatch函数，并且需要传入修改类型，如果dispatch中不存在该类型，则不允许修改。

接下来简单推理一下redux的实现过程（假设有组件Index,Header,Footer）。

1、第一步是需要有一个存储数据的对象，定义为appState

var appState = {        themeColor:'red',        themeBackground:'black'    };    //还需要一个修改数据的函数    function dispatch(action){        switch(action.type){            case 'UPDATE_THEME_COLOR':                appState.themeColor = action.color;break;            case 'UPDATE_THEME_BACKGROUND':                appState.themeBackground = action.color;break;            default break;              }    }    //修改完数据，就需要重新渲染了,定义渲染函数    function renderApp(state){        renderHeader(state);        renderFooter(state);    }    function renderHeader(state){        header = document.getElementById('header');        header.style.color = state.color;        header.style.backgroundColor = state.themeBackground;    }    function renderFooter(state){        title = document.getElementById('footer');        footer.style.color = state.color;        footer.style.backgroundColor = state.themeBackground;    }        dispatch({type:'UPDATE_THEME_COLOR',color:'green'})//修改主题色    renderApp(appState)//执行重新渲染

2、封装state和dispatch,命名为store，方便复用,同时添加监听，当数据变化时，通知订阅者重新渲染

function createStore(state,stateChanger){        const getState = () => state;//获取数据        const listeners = [];        const subscribe = (listener) => listeners.push(listener);        const dispatch = (action) => {            stateChanger(state, action);            listeners.forEach((listener)=>listener());        };        return {getState,dispatch,subscribe};    }    //实例化一个store。为了统一命名，dispatch改为stateChanger,appState改名为state    const store = createStore(state,stateChanger);    renderApp(store.getState());//首次渲染    store.subscribe(renderApp(store.getState()));//添加订阅者，监听到变化就重新渲染数据    store.dispatch({type:'UPDATE_THEME_COLOR',color:'green'});//修改主题

3、第二步有一个很大的缺陷就是，每次修改数据就重新全部渲染一遍，对性能影响很大。

优化点是: 判断数据是否有变化，如果没变化就不需要重新渲染，另外stateChanger与state合为一体。

//此处用到es6的浅复制，例如    let a = { name:'HAPPY',attr:{age:23},common:{sex:'女'}};    let b = {...a,attr:{age:24}};//b为{name:'HAPPY',attr:{age:24},common:{sex:'女'}}     a.name===b.name//true    a.attr===b.attr//false    a.common===b.common//true    //这样有50%以上的复用率    function stateChanger(state,action){        if(!state){             return {                 themeColor:'red',                 themeBackground:'black'             }        }        const newState = {...state};        switch(action.type){            case 'UPDATE_THEME_COLOR':                return {                    ...newState,                    themeColor: action.color                };            case 'UPDATE_THEME_BACKGROUND':                return {                    ...newState,                    themeBackground: action.color                };            default                 return newState;            }    }    //那么渲染的时候需要知道oldState和newState，这样才能对比数据的变化    function renderApp(state，oldState={}){//此处oldState放在后面，并且给默认值，是为了兼容首次渲染，首次渲染olsState是没有值的，所以给默认值        if(oldState===state){            return;        }        renderHeader(oldState,state);        renderFooter(oldState,state);    }    //如果renderHeder需要的渲染的数据是state内的子对象，那么在renderHeader渲染之前，也需要判断一下数据是否有变化，此处举的例子state结构简单，所以不需要判断。        function createStore(stateChanger){//此处是优化state与stateChanger结合。        let state = null        const getState = () => state;//获取数据        const listeners = [];        const subscribe = (listener) => listeners.push(listener);        const dispatch = (action) => {            state = stateChanger(state, action);            listeners.forEach((listener)=>listener());        };                dispatch({});//初始化，获取state        return {getState,dispatch,subscribe};    }    //最后需要oldState，那么我们就需要定义oldState    const store = createStore(stateStranger);    const oldState = store.getState();    store.subscribe(()=>{        const newState = store.getState();        renderApp(oldState,newState);        oldState = newState;    });//添加监听    renderApp(store.getState())//首次渲染    store.dispatch({type:'UPDATE_THEME_COLOR',color:'green'});//修改主题

4.此时的stateChanger是一个纯函数，就是内部逻辑只与参数有关，并且无副作用（也就是对其他数据没有任何影响）。它要做的仅仅是 —— 初始化和计算新的 state。（并不会修改state，因为我们每次返回的都是新的对象）

而这个函数就是redux中的reducer,那么我们给stateChanger改名字为reducer.现在我们的redux就实现完成了。

function reducer(state,action){...}     function createStore(reducer){...}     //接下来我们就可以定义不同的reducer，生成不同的store了,并且修改监听，例如     function themeReducer(state,action){...}     const store = createStore(themeReducer);     // 监听数据变化重新渲染页面     store.subscribe(() => renderApp(store.getState()))     // 首次渲染页面     renderApp(store.getState())     // 后面可以随意 dispatch 了，页面自动更新     store.dispatch(...)

但是我们怎么跟react进行连接呢？怎么把redux用在react中呢？就需要react-redux来连接。下一篇继续

参考教程：（）