Pastate.js : 響應式 react state 管理框架

Pastate 簡介

Pastate 是什麼

Pastate 是一個響應式 react state 管理框架，實現了對 state 的異步響應式管理。Pastate 是一個精益框架，它對不少高級概念進行了友好封裝，這意味着你沒必要學習一些難以理解的概念，就能夠在一個簡單的應用中便捷地使用 pastate。在應用變得逐漸複雜的過程當中，你只要逐漸學習並使用 pastate 中更多的功能，以滿日益複雜的系統開發需求。同時，pastate 也是一個向後兼容的漸進式框架，你能夠在現有的 react 或 redux 項目中，把一部分組件改用 pastate 來實現，再逐漸拓展到整個項目。

Pastate 主頁: https://pastate.js.org

Pastate GitHub: https://github.com/BirdLeeSCUT/pastate (歡迎 star)

簡單例子：

const state = store.state

class AppView extends Component {
    increaseAge(){
        state.myInfo.age += 1
    }
    changeName(newName){
        state.myInfo.name = newName
    }
    render() {
        ...
    }
}

你能夠直接對 state 節點進行賦值，pastate 的響應式引擎會異步爲你更新視圖！這種模式比原生 react 的 setState 方法或原生 redux 的 reducer 模式方便靈活不少！

特性

• 便捷易用：pastate 對高級概念進行了封裝，只要有 react 基礎知識便可輕鬆上手
• 響應式 state: 能夠直接用 js 原生模式更新 state 的值，pastate 會響應式地爲你更新相關視圖
• 類型提示：pastate 具備完善的類型定義文件，可藉助 intelliSense 極大地提升開發效率
• 按需渲染：pastate 實現了 state 節點按需溯源更新引用機制，視圖能夠高效響應 state 的變化
• 異步更新機制：當你對 state 進行連續的修改時，pastate 會高效地爲你只作一次異步視圖更新
• 友好的學習曲線：pastate 封裝了 flux 模式的高級概念，只需在感興趣時去了解這些概念
• 兼容 redux 項目：你能夠把 pastate 輕鬆整合到 redux 項目中，把部分容器實現爲 pastate 模式
• 支持 TypeScript：pastate 自己使用 TpyeScript 進行開發，有完善的類型定義和泛型支持
• MIT 協議受權 ： 你能夠免費地在我的或商業項目中使用，並按需修改或擴展

原理簡介

Pastate 名字源自 Path State 的簡寫，pastate 在 state 的每一個節點上增長節點的位置(path)信息和 store 歸屬信息，從而實現對象或數組節點的按需遞歸引用更新，實現 immutable state 特性，所以 pastate 能夠管理複雜的 state 樹並實現高效的異步按需渲染。同時 pastate 基於 ES5 的 Object.assign 實現了 state 的全節點響應式操做支持，你只需像修改普通變量同樣修改 state 便可, 如 state.userinfo.name = 'myName', 這時 pastate 的響應式引擎會爲自動爲你異步高效更新相關視圖，詳細原理請查看原理章節：

靈感來源

Pastate 受啓發於 redux 的 immutable state 管理模式和 vue.js 的響應式 state 設計模式；同時融入的精益(lean)設計思想。

可靠性

Pastate 已經經過 160+ 個測試用例的全面測試，穩定可靠。測試用例的具體內容可查看項目源碼中的 src/pastate/tests 目錄。

歡迎反饋

若是發現 pastate 的 bug 或有任何建議，歡迎提交 issue，感謝你們的反饋。若是你喜歡 pastate, 但願能給個寶貴的 star ^_^：pastate github 。

---

快速上手

咱們來看看如何用 pastate 構建一個最簡單的應用。

安裝

Pastate 是一個 react 狀態管理框架，須要配合 react 使用。咱們先使用 create-react-app 工具建立一個基本的 react 項目，並在這個項目上演示如何使用 pastate：

$ npm install -g create-react-app
$ create-react-app my-pastate-app
$ cd my-pastate-app

而後，能夠用 npm 直接安裝 pastate：

$ npm install --save pastate

或使用 yarn 安裝：

$ yarn add pastate

開始使用

Pastate 使用起來很簡單，咱們來建立一個 pastate 組件，顯示簡單的我的信息。

建立 src/MyPastateApp.jsx 文件來編寫咱們的組件：

import React, { Component } from 'react';
import { Pastore, makeOnlyContainer } from 'pastate';

const store = new Pastore({
    name: 'Peter',
    isBoy: true,
    age: 10
})

class AppView extends Component {
    render() {
        let state = store.state;
        return (
            <div>
                My name is {state.name}.<br/>
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
            </div>
        )
    }
}

export default makeOnlyContainer(AppView, store)

完成，這就是一個入門的 pastate 組件，有如下兩點區別於原生 react 項目：

1. 獨立於組件的 store

const store = new Pastore({
    name: 'Peter',
    isBoy: true,
    age: 10
})

Store 是一個數據中心，裏面儲存着 state 數據，幷包含一套 state 管理引擎和視圖更新引擎。

在初始化 store 時，須要向 Pastore 構造函數裏傳入一個初始化 state, 咱們一般使用如下命名的方式書寫, 以便複用這個初始化 state：

const initState = {
    name: 'Peter',
    isBoy: true,
    age: 10
}
const store = new Pastore(initState)

1. 對組件和 store 進行鏈接

對於只有惟一一個 store 的應用，咱們使用 pastate 提供的 makeOnlyContainer 把 store 和組件(Component)鏈接成一個的容器, 這使得組件視圖能夠響應 store 中 state 的變化：

接着，把該容器(Container)渲染在HTML中便可：

src/MyPastateApp.jsx

...
export default makeOnlyContainer(App, store)

src/index.js

import ReactDOM from 'react-dom';
import container from './MyPastateApp';
ReactDOM.render(container, document.getElementById('root'));

注意，makeOnlyContainer 生成的是一個 React Element, 即 <Xxx />, 所以在 render 時沒必要再多加一層 <... />。

更新 state 值

接下來咱們來嘗試更新 state 的值：經過兩個按鈕來控制 state.age 值的增長和減小。

• 先在組件中添加兩個操做函數 increaseAge 和 decreaseAge

// src/MyPastateApp.jsx
...
const store = new Pastore(initState)
class AppView extends Component {

    increaseAge(){
        store.state.age += 1
    }
    
    decreaseAge(){
        store.state.age -= 1
    }

    render() {
        ...
    }
}
...

能夠看到，使用 pastate 更新 state 很是簡便：直接對 state 中須要更新的節點進行賦值便可，與 store 鏈接的視圖會自動更新。

• 接下來在 JSX 中添加兩個按鈕來觸發這兩個操做函數：

src/MyPastateApp.jsx

...
    render() {
        let state = store.state;
        return (
            <div>
            
                My name is {state.name}.<br/>
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
                
                <button onClick={this.decreaseAge}> decrease age </button> 
                <button onClick={this.increaseAge}> increase age </button> 
                
            </div>
        )
    }
...

Amazing！咱們第一個簡單的 pastate 應用大功告成：

點擊 increaseAge 和 decreaseAge 按鈕， 能夠看到年齡值的變化。
你能夠再添加幾個按鈕來修改 state 中名字和性別，看看視圖有沒有如你所願地更新。

Pastate 在 store 中實現了一個響應式和 immutable 特性結合的 state 管理引擎, 咱們能夠像修改普通變量同樣操做 state, 同時 pastate 能夠高效地根據 state 的改變對相關視圖進行更新。

編輯器智能提示(intelliSense)

咱們推薦使用 Visual Studio Code 編輯器開發 react / pastate 應用，它擁有很好的變量類型智能提示功能和其餘優秀特性，使得咱們能夠提升開發效率，並探測減小一些輸入性錯誤。

Tips: vscode 默認關閉了經過 tab 鍵觸發 emmet 的功能, 你能夠經過修改設置開啓： "emmet.triggerExpansionOnTab": true 。

下面咱們簡單地使用 jsDoc 註釋來使 state 具備類型提示效果:
src/MyPastateApp.jsx

...
const initState = {
    name: 'Peter',
    isBoy: true,
    age: 10,
}
const store = new Pastore(initState)

/** @type {initState} */
const state = store.state; // 修改點, 把 state 提取成文件級的變量

class AppView extends Component {

    increaseAge(){
        state.age += 1 // 修改點，使用文件級的變量 state，下同
    }
    
    decreaseAge(){
        state.age -= 1 // 修改點
    }

    render() {
        // 修改點
        return (
            <div>
                My name is {state.name}.<br/> 
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
                ... 
            </div>
        )
    }
}
...

• 咱們把 store.state 提取爲文件級的變量 state，這使得對 state 的使用和修改變得方便。
• 同時咱們在 const state 以前加上類型註釋 /** @type {initState} */, 使得編輯器知道 state 的格式，並得到以下的智能提示效果：

智能提示的功能在 state 結構複雜的時候很是實用。

你也可使用 pastate 提供的 createStore 函數來建立 store, 並自動獲取 state 類型定義，具體用法請看API文檔，咱們如今先使用 new Pastore 的方式建立 store 。若是你使用 Typescript 進行開發，pastate 支持 Typescript 泛型的變量類型傳遞功能，無需使用 jsdoc 註釋。

這裏只是簡單例子只是涉及到一個 react 組件，在文檔中咱們會介紹如何構建一個包含多個組件的 pastate 應用。

---

Pastate 文檔

• 1.快速上手
• 2.多組件應用
• 3.數組渲染與操做
• 4.表單渲染與操做
• 5.模塊化
• 6.多模塊應用
• 7.規模化
• 8.原理與API文檔
• 9.其餘資源

將持續更新，歡迎關注本專欄 ^_^