導語
一開看 redux 的時候還是比較蒙的，感覺比較繞，但是又好像是那麼回事，接觸一個新概念的時候可能都是如此，多去接觸就熟悉了，今天就來分享下 redux 的三大核心為什麼就能如此神奇的施展魔法，幹擼完原始碼，真的就有種撥開雲霧見日出的感覺
開整
我們再來稍微溫習下 redux 的工作原理。墊吧墊吧，要不然容易暈。redux 是為了實現資料共享，那麼任何一個元件都會得到所有的狀態，而且元件也不可能只用自己的狀態，如果元件只用自己自己的狀態，那麼就不需要 redux 了，一切就如此簡單明瞭。store 作為一個狀態樹，來對狀態進行管理。通過它的 getState 可以對 state 進行讀操作，action 釋出命令對狀態進行寫（類似於產品提需求）。這是所有元件都要遵守的約定，因為 redux 讓所有狀態都共享，所以說，讀可以讓你讀，不嚴格要求，但是寫操作，只能通過 action 修改 state (執行相應的 reducer )，這樣才能保證資料的安全性。而對於元件來說，你只要 dispatch 一個 action 就好了。就是如此方便。好了，邏輯都明白了，接下來分析下內部機制就有基礎了。
一探store
分清state
一般我們的 redux 都是配合 react 使用，但是 react 和 redux 只是合作關係，並沒有血緣關係。因此，自然 react 中的state也和 redux 中的 state 不是一回事了， react 中的 state 是元件內部自己的狀態資訊，而 redux 中的 state 是 redux 自己的資料。 react 配合 redux 使用的時候， react 就會拿 redux 裡面的 state。既然如此我們在新建一個 redux ，在 redux 下目錄結構如下：
首先我們把要共享的資料放在 state 裡面
export const state = {
head: {
text: "我是頭部",
color: 'red'
},
body: {
text: "我是body",
color: "green"
}
}
複製程式碼這樣我們就把要共享的資料設定好了，待會我們只要把這個檔案暴露的介面引入就能使用這裡面的資料了。
構建createStoreAPI
我們為了把我們剛才構建的 state 也放到待會我們要用構建的這個 createStoreAPI 建立的的物件裡面去，我們需要這個函式接受兩個引數，一個就是我們建立的最初資料狀態，另一個是修改函式。於是我們的 createStorage.js 程式碼如下：
export const createStore = (state,storeChange) => {
const store = state || {};
const dispatch = (action) => {
storeChange(store,action);
}
return { store,dispatch }
}
複製程式碼這段程式碼的設計思想是，當我們在建立一個 store 物件時，我們可以把後臺提供的原始資料放入到 store 這個物件中，然後再暴露一個 dispatch 方法來修改 state。按照規則，要修改共享的狀態，必須通過 dispath 方法，然後接收一個 action，他會呼叫 reducer 函式來真正執行改變。這樣的就相當於通過 store 把 action 和 reducer 連線起來了。一個差不多的 createStoreAPI 就建立完了
構建storeChangeAPI
在 createStorage 裡面，我們已經把元件修改 state，交給了 dispatch(action) ,當我們元件使用修改方法的的時候，就可以 dispatch 了，為何要 dispatch，因為 dispatch 是寫的一個名詞，分配管理改操作，就像我們要加工資要填申請一樣。那這樣就更加明朗了。毫無疑問，我們的 storeChange 肯定就是一個 reducer 函式了，於是 storeChange.js 程式碼如下：
export const storeChange = (state,action) => {
switch(action.type) {
case 'HEAD_COLOR':
state.head.color = action.color
break;
case 'BODY_TEXT':
state.body.text = action.text
break;
default:
return state;
}
}
複製程式碼工欲善其事，必先利其器。現在要用的武器都打造好了，自然就喲使用起來了，在 index.js 下程式碼如下
import { state } from './redux/state.js'
import { storeChange } from './redux/storeChange'
import { createStore } from './redux/createStorage'
const { store ,dispatch } =createStore(state, storeChange)
function renderHead (state) {
const head = document.getElementById('head');
head.innerText = state.text;
head.color = state.color;
}
function renderBody(state) {
const head = document.getElementById('body');
head.innerText = state.text;
head.color = state.color;
}
function renderApp(state) {
renderHead(state.head)
renderBody(state.body)
}
renderApp(store)
dispatch({type: 'BODY_TEXY',text: '我是經過dispath修改的body'})
renderApp(store)
複製程式碼建立 rederAPP 函式分別渲染 head 和 body 當我們需要改變 state 的時候就 dispatch 一下 action，當我們修改完了，要頁面重新渲染下，頁面就發生了改變了。這就是一個簡易的 redux 了 這就是最終的效果：
結束語
本來想在本文繼續把 context 這個大佬請出來的，但是感覺篇幅會很長，而且剛好時間也比較尷尬，所以今天的分享就先到這，context 下次分享了。自己並沒有很牛逼，所以分享的東西可能會比較基礎一些，但是我個人感覺挺通俗易懂的。但是程式設計路上，且行且珍惜，我會慢慢提高我的文章質量，分享更多心得。覺得不錯的朋友可以支援一波，謝謝大家。