do一下來了一個redux

導語

一開看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下次分享了。本身並無很牛逼，因此分享的東西可能會比較基礎一些，可是我我的感受挺通俗易懂的。可是編程路上，且行且珍惜，我會慢慢提升個人文章質量，分享更多心得。以爲不錯的朋友能夠支持一波，謝謝你們。