狀態管理本應如此簡單

時間 2021-05-20

標籤 html vue react git github vuex typescript redux 微信網絡欄目 HTML 简体版

原文原文鏈接

2021年520前夕。近一年來主要都在作業務，不過對不斷提高Coding質量與速度的追求和思考一直沒停過。機緣巧合之下，有幸着重花時間完善了一套穩定、易用的狀態管理方案。html

---被舉報分割線---
我去，頭一回被舉報？打廣告？這，[無奈] 那就優化一版。
---被舉報分割線---vue

歡迎Star和訂閱個人博客。

做者在工做歷程中，由最初用redux，而後到用vuex，再到實驗mobx、dva、react hooks甚至是自研工具，最後迴歸redux。react

在此期間，一直在探尋簡單易用，而且有完整類型提示的方案。就是當咱們輸入一兩個關鍵字，IDE自動彈出模型對應dispatch方法，再輸入空字符串''，自動提示可能要調用的方法等。平常要寫太多狀態管理代碼，徹底不必敲不少重複內容。git

那麼從新寫一個狀態管理庫？github

redux已經很好用，只是代碼略微繁瑣，爲什麼要從新寫？基於redux封裝是否可行？vuex

那是否要集成其餘路由、模塊化加載和網絡請求等模塊，讓用戶經過這個工具作大多數事？typescript

這實際上是不少集成式框架作的事。但狀態管理自己就是單獨一個模塊，不必和其餘模塊耦合在一塊兒。模塊化對於項目將來局部升級和改造要遠方便於集成式。redux

既然講到了類型推導提示，那麼是否只有TypeScript項目才能完美支持？微信

固然不少類型都是藉助TypeScript定義，但現在利用JSDoc註釋類型寫法也能讓JS項目支持類型提示和推導。網絡

是否能兼容已有項目？

只要遵循相應規則，正常狀況下都能兼容。

方案

如今的狀態管理方案概念是：

使用狀態模型model管理狀態
狀態模型包含原始狀態state和更新狀態方法methods
全部狀態和方法都支持類型推導提示

狀態模型model

使用狀態模型的好處是既能夠集中式管理狀態，同時可以讓不一樣組件實現跨組件共用狀態。
同時，每個狀態模型的經常使用方法可在該模型暴露，以供外界使用。

狀態模型包含原始狀態`state`和更新狀態方法`methods`

簡化模型的構成元素，只須要狀態和更新狀態方法。更新狀態方法用於處理複雜狀態更新，也就是所謂的反作用。

{
    name: 'counter',
    state: {
        count: 0
    },
    methods: {
        add({ state, update }, number) {
            update({ count: state.count + number })
        }
        async delayAdd({ dispatch }, duration, number) {
            await new Promise(resolve => setTimeout( () => resolve(), duration ))
            dispatch('add', 1)
        }
        async run({ state, dispatch, getState }) {
            console.log('current count', state.count)
            await dispatch('delayAdd', 1000, 1)
            console.log('count after update', getState().count)
        }
    }
}

而直接更新某個狀態只需經過方案庫暴露一個特有更新方法便可。好比：