文章來源: IMweb前端社區 黃qiong(imweb.io)
IMweb團隊正在招聘啦，簡歷發至jayccchen@tencent.com

Redux 其實是用來幫我們管理狀態的一個框架，它暴露給我們四個接口，分別是：

• createStore
• combineReducers
• bindActionCreators
• applyMiddleware
• compose

源碼系列里會分別對這五個接口進行解析。

Redux 的源碼解析系列開篇之前，先來了解一下它的實現思想。

為什么要有dispatch

假設一種場景下，app里每個組件都需要拿到appState的一部分進行渲染。

但是這里存在一個風險就是，誰都可以修改appState的值，換句話說，有一天當appState變了你都不知道是誰改的，所以我們需要有一個管理員來幫我們管理我們的狀態，這時候引入了dispatch函數，來專門修改負責數據的修改。

function dispatch (action) {switch (action.type) {case 'UPDATE_TITLE_TEXT':appState.title.text = action.textbreakcase 'UPDATE_TITLE_COLOR':appState.title.color = action.colorbreakdefault:break} }復制代碼

解決問題：
既可以解決組件共享問題，同時不會有數據可以被任意修改的問題。

為什么要有createStore

現在我們有了狀態，又有了dispatch，這時候我們需要一個高層管理者store，幫我們管理好他們，這樣再用的時候就可以直接store.getState store.dispatch的方式獲取和更改組件。

所以我們就有了createStore這個函數幫我們生成store, 然后將getState 跟 dispatch 方法export出去。

function createStore(state, stateChanger) {const getState = () => state;const dispatch = (action) => stateChanger(state, action)return {getState, dispatch} }復制代碼

createStore 接受兩個參數，一個是表示app的 state。另外一個是 stateChanger，它來描述應用程序狀態會根據 action 發生什么變化，其實就是相當于本節開頭的 dispatch 代碼里面的內容，我們后來會將它命名為reducer。

但是這里還有一個問題，就是數據發生改變之后，我們都需要手動在重新render一次APP，這時候就需要觀察者模式，訂閱數據的改變，然后自動調用renderAPP,所以我們的createStore功能又強大啦~

function createStore(state, reducer) {const getState = () => state;const listeners = [];const subscribe = (listener) => {listeners.push(listener)} const dispatch = (action) => {reducer(state, action);// 數據已發生改變就把所有的listener跑一遍listeners.forEach((listener) => {listener()})}return {getState, dispatch, subscribe} }復制代碼

我們就可以這樣使用

store.subscribe(() => renderApp(store.getState()))復制代碼

由此可以看出，dispatch是一個重要函數，當每一次我們調用dispatch去改變app的狀態的時候，它都會同時執行所有的訂閱函數。

到這一步，一個APP就已經可以無壓力的跑起來啦，最后一步，當然是關注性能，我們這個app 還是有嚴重性能問題的，因為每一次的dispatch 所有的子組件都會被重新渲染，這當然是不必要的。

所以就需要對reducer產生的前后appState進行一個對比，這就要求reducer必須是一個純函數，返回的是一個新的object，不能直接更改reducer的參數，這樣才能夠對比可以通過對比前后的state是否相等，來決定是否render

// reducer用來管理狀態變化 function reducer (state, action) {if(!state) {return appState;}switch (action.type) {case 'CHANGE_TITLE':return {...state,title: {...state.title,text: action.text}}case 'CHANGE_CONTENT':return {...state,content: {...state.content,color: action.color}}} }復制代碼function createStore(state, reducer) {let appState = state;const getState = () => appState;const listeners = [];const subscribe = (listener) => {listeners.push(listener)} const dispatch = (action) => {// 覆蓋原先的appStateappState = reducer(state, action);listeners.forEach((listener) => {listener()})}return {getState, dispatch, subscribe} }復制代碼

OK,到這一步，我們的redux就基本完成啦~ 接著改裝下我們的reducer，讓它有一個初始值,這樣我們的createStore就只需要傳入一個reducer即可

// reducer用來管理狀態變化 function reducer (state, action) { //設置初始值if(!state) {return appState;}switch (action.type) {case 'CHANGE_TITLE':return {...state,title: {...state.title,text: action.text}}case 'CHANGE_CONTENT':return {...state,content: {...state.content,color: action.color}}} }復制代碼function createStore (reducer) {let state = nullconst listeners = []const subscribe = (listener) => listeners.push(listener)const getState = () => stateconst dispatch = (action) => {// 可以看到 由于reducer返回的是一個新的object，那在外層，我們就可以對比nextProps跟t his.props 來決定是否渲染state = reducer(state, action)listeners.forEach((listener) => listener())}dispatch({}) // 初始化 statereturn { getState, dispatch, subscribe } }復制代碼

總結以下：createStore里要做三件事

• getState
• dispatch
• subscribe
• 初始reducer的狀態

四個步驟

// 定一個 reducer, 負責管理數據變化還有初始化appState的數據 function reducer (state, action) {/* 初始化 state 和 switch case */ }// 生成 store const store = createStore(reducer)// 監聽數據變化重新渲染頁面 store.subscribe(() => renderApp(store.getState()))// 首次渲染頁面 renderApp(store.getState()) // 后面可以隨意 dispatch 了，頁面自動更新 store.dispatch(...)復制代碼

我們整個過程就是不斷地發現問題，解決問題

1、共享狀態 -> dispatch

2、store統一管理 dispatch getState

3、性能優化 --> reducer是一個純函數

4、最終初始化整個reducer

以上就是redux的大致思想。

參考文檔：

huziketang.com/books/react…

轉載于:https://juejin.im/post/5a119426f265da430f31b165

總結

以上是生活随笔為你收集整理的Redux 源码解析系列(一) -- Redux的实现思想的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。