如何在Vue裏實現一個Redux狀態管理？

時間 2019-11-06

標籤如何 vue 實現一個 redux 狀態管理简体版

原文原文鏈接

如何在Vue裏實現一個Redux狀態管理

嗯，咱們都知道 redux 一般是 react 項目中中一種管理數據的手段，它跟咱們 vue 項目裏的 Vuex 狀態管理相似，功能相同，可是使用方法卻有不一樣~vue

最近在學習 redux 這一塊，爲了更好的幫助跟我同樣的萌新更加深刻的瞭解 redux 的內部原理，咱們就來試試，手動實現一個簡單的 redux 狀態管理。react

不一樣的是，咱們是在 vue 項目中來實現的~git

代碼未動，目標先行

咱們要實現 redux ，首先要給本身定個小目標，也就是一個業務場景，咱們呀，也別想那麼複雜，就以最簡單的仍是最經典的計數器開始，如圖：github

看圖，你們就應該很清楚作什麼，當我點擊加號按鈕，但願倉庫裏的數據能增 1，點擊減號按鈕，但願倉庫裏的數據能減 1 ，嗯，很明確的需求，咱們就來看看怎麼實現吧~redux

具體實現

redux建立

首先咱們須要在src目錄下建立一個redux目錄，用來放咱們redux的核心代碼，其中最核心的代碼就是 createStore 方法了，由於咱們在初始化 store 的時候就是經過這個方法進行建立的，redux源碼裏它會返回 dispatch、subscribe、getState、replaceReducer 四個方法，可是實際上咱們一般用到的就是前三個了~bash

ok，咱們接下來慢慢的來實現~app

在redux目錄下建立一個index.js，代碼以下：框架

// index.js

function createStore () {
    let state ;
    
    //分發action
    let dispatch = ()=>{
    
    }
    
    //訂閱數據更新
    let subscribe = ()=> {
    
    }
    
    //獲取store的狀態
    let getState = ()=>{
    
    }
    
    return{
    	dispatch ,
    	subscribe ,
    	getState
    }

}

export {
    createStore
}
複製代碼

這樣咱們就有了一個 redux 雛形，接下來主要是完善裏面的方法而已~函數

初始化store

咱們先把這個 store 掛載到 vue 的原型上，方便後面的使用，咱們在src建立一個store文件夾，並新建一個index.js，代碼以下：學習

import { createStore } from "../redux"

const store = createStore();

export default store;
複製代碼

掛載store

咱們在入口文件 main.js 引入，並掛載便可：

import store from './store'

Vue.prototype.$store = store;
複製代碼

接着，若是在頁面中打印 this.$store，出現以下結果，則證實呢已經掛載成功了~

可是此時，並無什麼實際的功能，由於咱們並無完善咱們的 createStore 裏方法~

完善createStore

使用過 redux 的同窗都知道，咱們在初始化 store , 也就是調用 createStore 的時候是須要傳遞一個reducers 參數的，用來寫入更改狀態的處理邏輯，咱們這裏以計數器爲例，將計數器的 reducer 做爲入參~

這裏我將計數器相關actions、constants、reducer 直接貼代碼了，就不在贅述了~

constants counter.js

// 常量定義
    export const ADD = 'add';
    export const MINUS = 'minus'
複製代碼

actions counter.js

import * as constants from '../constants/counter'

//增長
export const add = ()=>({
    type : constants.ADD
})

//減小
export const minus = ()=>({
    type : constants.MINUS
})

複製代碼

reducers counter.js

import * as constants from '../constants/counter'

const defaultState = {
	count: 0
}

export default (state = defaultState, action) => {
    switch ( action.type ) {
    	case constants.ADD :
            return {
            	...state ,
            	count : state.count + 1
            }
    	case constants.MINUS :
            return {
                ...state ,
                count : state.count - 1
            }
    	default :
            return  state;
    }
}

複製代碼

dispatch

咱們指望，咱們點擊加號的時候，會派發一個add的action，而後對應的 reducer 接收到 action 作對應的處理，減號按鈕同理~

順着這個思路，咱們先來看看 dispatch 方法，須要接受一個參數 action ，action 必須是一個對象，必須包含一個 type 值，代表須要 action的類型，而後咱們能夠經過傳過來的 recuder 獲取到新的狀態，所以，dispatch 方法以下：

//分發action
let dispatch = (action)=>{
    //判斷 action 的 type 值
    if( typeof action !== 'object') throw Error('Expected the action to be a object.');
    if( action.type === undefined ) throw Error('The action.type is not defined');
    //獲取新的 state
    state = reducer(state, action);
}
複製代碼

咱們打印 state ，經過點擊加號和減號按鈕，能夠看到 state 確實有變換，跟咱們預期的同樣~

getState

咱們能夠經過 getState() 方法獲取當前 state ，所以該方法相對比較簡單，以下~

//獲取store的狀態
let getState = () => state;
複製代碼

這樣咱們在每次派發 action 的後，經過 getState 方法確實能獲取到對應的狀態~

但其實有個問題，咱們初始獲取 state 的時候會返回 undefined ，由於咱們初始的時候只是定義了 state ，卻沒有賦值~

爲了解決這個問題，咱們能夠在初始化的時候 dispatch 一個 init 的 action ，這樣會返回 reducer 中默認的 state ，即：

//初始化state
    dispatch({ type : '@@redux/INIT'});
    
    //獲取store的狀態
    let getState = () => state;
複製代碼

subscribe

雖然咱們如今經過按鈕，在控制檯打印出每次 count的變化，可是並無反饋到頁面上，由於頁面上咱們的值並無作更改~

爲了監控數據變化後作對應的處理，redux 提供了一個叫 subscribe，它的入參是一個函數，做用就是訂閱數據變化，作對應的邏輯處理，返回一個函數，用來取消訂閱，所以咱們能夠對 subscribe 函數作以下處理：

//訂閱處理函數
let listeners = [];

//訂閱數據更新
let subscribe = (fn)=> {
    listeners.push(fn);
    return ()=>{
        listeners = listeners.filter(listener => fn != listener );
    }
}
複製代碼

注意，上面只是訂閱，當咱們數據變化的時候須要發佈，即要循環 listeners 中的方法，依次執行，所以須要在 dispatch 方法的最後加上一句：

listeners.forEach(listener => listener());
複製代碼

效果

接着咱們來試試~

代碼以下：

<template>
    <div class='wrapper'>
        <div class="">計數器：{{ number }}</div>
        <div class="btn-box">
            <button class="btn" @click="handleAddBtnClick">+</button>
            <button class="btn" @click="handleMinusBtnClick">-</button>
        </div>
        <div class="btn-box">
            <button class="btn" @click="handleRemoveListenerBtnClick">取消打印監聽</button>
        </div>
    </div>
</template>

<script>
    import { add , minus } from '../actions/counter'
    export default {
        data(){
            return{
            	number : this.$store.getState().count ,
                consoleHandler : null
            }
        },
        methods : {
            //計數器加一
            handleAddBtnClick(){
                this.$store.dispatch(add())
            },
            //計數器減一
            handleMinusBtnClick(){
            	this.$store.dispatch(minus())
            },
            //取消打印事件監聽
    		handleRemoveListenerBtnClick(){
                this.consoleHandler();
            }
        },
        mounted () {
            //數據更新事件
            this.$store.subscribe(()=>{
            	this.number = this.$store.getState().count;
            })
            //打印事件
            this.consoleHandler = this.$store.subscribe(()=>{
            	console.log('個人值發生了更改~')
            })
    	}
    }
</script>

<style scoped>
    .wrapper{
        padding: 30px 15px;
        text-align: center;
    }
    .btn-box{
        margin-top: 20px;
    }
    .btn{
        display: inline-block;
        font-size: 20px;
        min-width: 50px;
        text-align: center;
        margin: 0 10px;
    }
</style>

複製代碼

咱們在初始的時候添加了兩個事件監聽，一個用來更新 number的值，另外一個用來打印，咱們每次數據變動都會觸發這兩個方法，當咱們點擊取消打印監聽按鈕的時候，以後的數據變化不會在觸發打印操做~

本身動手試試~

combineReducers

到此，咱們已經基本實現了一個簡單版的 redux ，可是還不夠完美，問題在於咱們還差一個函數，叫 combineReducers ，它是用來合併多個 reducer 返回一個新的 reducer，以此區分不一樣的狀態~

咱們在剛纔的 redux 文件夾下的 index.js 添加這個方法，以下：

// 合併reducer
// key是新狀態的命名空間 值是reducer，執行後會返回一個新的reducer
function combineReducers (reducers) {
    // 第二次調用reducer ，內部會自動的把第一次的狀態傳遞給reducer
    return (state = {}, action) => {
    	// reducer默認要返回一個狀態
    	let newState = {}
    	for (let key in reducers) {
            // 默認reducer倆參數 一個叫state，一個叫action
            let s = reducers[key](state[key], action);
            newState[key] = s;
    	}
    	return newState;
    }
}
複製代碼

接着，將咱們的reducer更換一下便可，這裏就不在贅述了~