本身动手实现redux(一)

redux 工做流

redux实现

let createStore = (reducer){
    //    state存储(不是管理)着全部状态
    //    最开始先调用下reducer，以获得最初各组件的默认状态值
    let state = reducer(); 
    //     redux的实质其实就是观察者模式，当store里的数据发生变化时，redux会通知全部订阅者
    //    `istenners`是一个数值，里面就是全部的订阅者
    let listheners = [];
    //    getState用于从store中从获取数据
    let getState = (){
         return state;
    };
    
    //     订阅事件，返回一个取消订阅函数
    let subscribe =  (cb)=>{
        listhenners.push(cb);
        return ()=>{
            listhenners = listhenners.filter(item=>{
               return  item !== cb
            });
        }
    };

    let dispatch = (action)=>{
        //     `dispatch`一个action(动做)， 交给纯函数处理
        state = reducer(state, action);
        //     当数据发生改变后，通知订阅者
        listhenners.forEeach(listhener=>{ listhener() });
    };

   return {
        getState,
        subscribe,
        dispatch
    }
}
export default createStore;

redux的使用

当咱们使用redux时, 首先须要使用redux的createStore而且传入reducer来建立咱们的store

import createStore from 'redux';
//   此处还用引入reducer 
let store = createStore(reducer);
//    导出的store, 在须要的地方引入便可 
export  default store;

以上咱们就实现了一个简易的redux