本身動手實現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