redux之createStore方法底層封裝模擬

首先在看**之前讓我們一起回顧下redux的思想吧   首先redux就是乙個mvc思想的框架，他總體是遵循資料的單向流動自頂向下流動

在我們倉庫中有乙個initstate用來儲存著我們的初始資料 另外還有個actions這個用來進行一些變數的改變和傳遞 也就是mvc結構中的c---控制層

另外裡面的reducer是對應著mvc中m層 用來進行邏輯的處理  注意這裡的邏輯處理不能操作ui邏輯也就是直接控制檢視的變數

當我們使用者想要改變資料的時候必須觸動actions讓其去操作reducer然後進行資料的改變，而不能讓使用者直接去操作我們state中的資料

獲取資料的時候也是同理 不能讓其對資料庫直接操作

先介紹下redux的使用  **如下

1

//引入redux中建立倉庫的方法
23 import  from "redux";45
6 const initstate=910
1112 let reducer=(state=initstate,action)=>22}
2324
2526 const reducers=combinereducers()
2728 const store=createstore(reducers);
29 export default store;

這是倉庫的一些寫法，而我們使用的時候   引入store 直接 呼叫下面這個方法

store.dispatch()  

獲取值要放在訂閱模式中  防止倉庫改變但是頁面不能同步更新 所以此時發布訂閱模式就派上了用場

store.subscribe(()=>)

})以上介紹的是redux中的使用，下面是模擬這個效果進行的封裝

先展示乙個簡單版

1

class flux
7getstate(attr))[attr]
12         }else)14
}15}16
dispatch(actiontype)
26subscriber(cb)
30promulgator())35}
36}3738 export default flux;

看完上述的方法不知道大家有沒有發現什麼問題 

在外面其實可以通過例項訪問到裡面state和reducer   既然能夠訪問到那麼就證明使用者可以不通過我們規定的方法去直接修改數值

這樣就與我們封裝的資料單向流動 每次使用者想要改變資料必須通過actions找到對應的reducer去修改的初衷了，所以我們需要對其進行一些

改正 讓呼叫這個方法的時候只能通過我們暴露給使用者的方法去改變，而不應該有其他的介面存在

具體改正如下

let state=symbol("state")

//因為我們不能將this上暴露出state 不然使用者可以訪問到 所以這裡要用到symbol
class flux
getstate(attr))[attr]
}else
)}        }
}dispatch(actiontype)
subscriber(cb)
promulgator())
}}export 
default flux;

1 import store from  "../tool/index"

23 let initstate=
67 export let actions=13}
14}1516 let reducer=(state=initstate,action)=>}22}
23default:24
25return;26
}27}28
29//
引入我們封裝的flux框架 然後將reducer傳入 並且將action傳入
3031
//注意這裡接受的是物件
32 export default
newstore()

Redux原始碼分析之createStore

redux原始碼分析之基本概念 redux原始碼分析之createstore redux原始碼分析之bindactioncreators redux原始碼分析之combinereducers redux原始碼分析之compose 接著前面的，我們繼續，開啟createstore.js,直接看最後，c...

Redux原始碼解讀 （5）createStore

下面介紹最後乙個函式,createstore.先上乙個基本的用法吧。const store 下面上原始碼吧。首先說一下，這麼多 其實首次執行的邏輯很簡單，大部分 都是定義了乙個函式去等待呼叫的，真正就只是呼叫了乙個預設的dispatch方法，初始化了一下下currentstate.export de...

redux之入門學習

總結 1 頁面上view通過store.dispatch 發出 action，action統一在actioncreators.js檔案中，2 store 收到 action 以後，執行reducer.js中對應的方法，reducer是乙個函式，它接受 action 和當前 state 作為引數，返回...