摘要：一個管理數(shù)據(jù)層的產(chǎn)品地址我們將定義為一個產(chǎn)品而不是一個框架亦或工具包。認(rèn)識裝飾器，一切故事的開始，目前僅僅只有一個參數(shù)。我們對場景的定義多個頁面之間針對同一組業(yè)務(wù)數(shù)據(jù)進(jìn)行的一連串行為動作來完成的一組業(yè)務(wù)，我們稱之為場景。

github地址

我們將dingDang定義為一個產(chǎn)品而不是一個框架亦或工具包 。

因為dingDang在設(shè)計之初就將用戶的開發(fā)體驗放在第一位，而性能問題則放在第二位。

當(dāng)然這并不意味著我們就是一個性能很糟糕的產(chǎn)品，只是說我們會在性能能夠接受的范圍內(nèi)盡可能的去讓開發(fā)者的開發(fā)體驗更好。 

事實上dingDang的內(nèi)部數(shù)據(jù)全部都采用了immutable數(shù)據(jù)類型。

dingDang中使用了大量的 Promise 于 immutableJS ， 如果你對此不太熟悉，可以先熟悉一下 這兩個知識點。

DingDang裝飾器 ， 一切故事的開始 ， 目前 僅僅只有 sceneStorage 一個參數(shù) 。

主要用來定義場景的臨時數(shù)據(jù)存儲方案。

比如說：

在react-web 中 你應(yīng)該采用sessionStorage 或者 localStorage  ， 

而在react-native 中，你應(yīng)該采用AsyncStorage 。

在sceneStorage中的3個函數(shù) 所有的返回值 要求是標(biāo)準(zhǔn)的 JS Object , set 方法的 key 我們也會傳輸一個標(biāo)準(zhǔn)的 JS Object

@DingDang({
    sceneStorage: {
        set: (k, v) => sessionStorage.setItem(k, JSON.stringify(v)),
        get: (k) => JSON.parse(sessionStorage.getItem(k)),
        del: (k) => sessionStorage.removeItem(k)
    }
})
class App extends React.Component {

    render() {
        return (
            
                
                
            
        )

    }

}

render(
    ,
    document.querySelector("#app")
)

const store = {
    namespace: "demoStore",
    state: {},
    rules: {},
    reducer: {},
    effect: {},
    initialization: () => false,
    destroy: () => false
}

事實上，store中只有namespace字段是必須的，其他的字段如果你不需要的話，可以不寫。

該屬性的值是一個字符串 ， 在dingDang中請務(wù)必保證namespace的唯一性，因為我們需要以此為依據(jù)去判定用戶是否進(jìn)入了一個全新的場景。

該屬性中主要用來存儲store中的所有數(shù)據(jù)集 ， 一般來說dingDang會將這里的數(shù)據(jù)都轉(zhuǎn)換為immutable類型。

首先讓我們來看一個完整的rules的案例：

export default {
    namespace: "demoStore",
    state: {
        name: "張三"
    },
    rules: {
        name: [
            {
                validate: (state, name) => name ? true : false,
                error: "用戶姓名不能為空",
                miss:false
            },
            {
                validate: (state, name) => name.length < 6,
                error: "用戶姓名最大長度不能超過6！",
                miss:true
            }
        ]
    }
}

rules 中配置的其實是針對state 中數(shù)據(jù)的校驗機制 ，比如在我們的state 中有name這個字段 ，
那么你可以在 rules中也配置一個 對應(yīng)的name字段 ， 但是在rules中 ， 該字段的值必須為數(shù)組， 
具體的校驗規(guī)則，我們會按照數(shù)據(jù)的先后順序來執(zhí)行。
數(shù)據(jù)中存儲的是每一個 獨立的 rule ，一個標(biāo)準(zhǔn)的 rule如下：

{
    validate: (state, name) => name ? true : false,
    error: "用戶姓名不能為空",
    miss:false
}

validate : 值為一個判斷函數(shù) ， 該函數(shù)我們會自動的注入全量的state參數(shù)， 以及你即將賦予字段的新值 ， 
例如：name 。 這里的校驗邏輯為： 如果滿足你所需的格式 ，那么返回true ， 否則false

error: 錯誤提示 ， 在執(zhí)行validate得到false之后拋出的異常信息

miss : 定義是否丟失， 這里的含義是指， 如果即將賦予的新值不能滿足校驗條件， 那么新的值是否丟失掉（即不存儲進(jìn)state）
如不定義該字段， 那么該字段默認(rèn)為false ， 即不丟失 ，依然賦予state。

該字段內(nèi)存儲的應(yīng)該都是純函數(shù) ，在這里你可以直接去針對state賦予全新的值 ， 首先讓我們來看一段相對完整的reducer代碼案例：

export default {
    namespace: "orderStore",
    state: {
        goodsList: [
            {
                id: 1,
                name: "方便面",
                price: 2
            },
            {
                id: 2,
                name: "筆記本電腦",
                price: 3281
            }
        ],
        cart: []
    }
    reducer: {
        addToCart: (state, goods) => {
            return state.set("cart", state.get("cart").push(goods));
        }
    }
}

正如上面的demo所示 ， 我們會為reducer 中的每一個函數(shù)的 第一個參數(shù)都注入一個全量的 immutable 類型的state ,
而第二個參數(shù)則是你在調(diào)用的時候傳入的。我們對reducer的要求是，最后你必須返回一個你期望的、全新的、全量的state。

下面我們看一段調(diào)用reducer 的案例代碼：

@Page(Store)
export default class GoodsList extends React.Component {

    static injectProps = {
        goodsList: [],
        cart: []
    }

    _addToCart = async (n) => {
        const {execReducer} = this.props;
        try {
            await execReducer("addToCart")(n)
        } catch (err) {
            console.log(err)
        }
    }

    render() {

        const {injectProps: {goodsList}} = this.props;

        return (

            
                
                    
                        
                            
                              this._addToCart(n)
                                }>加入購物車
                            }/>
                        
                    
                
                
                    
                        去結(jié)算
                    
                

            

        )
    }

}

上述的demo中 ， 我們希望你不要被過多的去關(guān)注可能對于你來說未知的代碼影響，你只需要關(guān)注我們希望闡述的內(nèi)容即可（即_addToCart函數(shù)），
首先我們應(yīng)該明確_addToCart函數(shù)是一段調(diào)用reducer的代碼 ， 其次我們觀察到 ， _addToCart函數(shù)采用了async await 的方式來書寫，
說明該函數(shù)是異步的 ， 并且返回了一個Promise對象給我們 。

事實上，在你執(zhí)行reducer時，dingDang內(nèi)部有可能會去rules中取到對應(yīng)的規(guī)則進(jìn)行校驗，如果出現(xiàn)異常的話會reject出來給你 ， 所以這里
catch到的err其實是你的rules中所配置的信息 ， 同時如果你的reducer沒有任何毛病， dingDang依然會有返回值給你，這個返回值是reducer
之后的一個全新的state。

我們將這里定義為副作用的 ， 也就是希望你將所有的非純函數(shù)在這里定義（依賴于外部因素的函數(shù)，相同輸入并非能保障得到相同的結(jié)果 ，比如調(diào)用API）。
慣例，讓我們看一段完整的effect案例：

export default {
    namespace: "orderStore",
    state: {
        goodsList: [],
        cart: []
    }
    reducer: {
        addToCart: (state, goods) => {
            return state.set("cart", state.get("cart").push(goods));
        }
    },
    effect:{
        queryGoodsList: async ({resolve , reject , state , execReducer , onChangeState} , params) => {
            const result = await queryGoodsListByAPI(params);
            if( result.success ){
                await onChangeState(result.goodsList).catch(err => reject(err));
                resolve(true)
            }else {
                reject( result.error )
            }
        }
    }
}

effect 的參數(shù)，我們注入的比較多， resolve 、 reject 這里就不作解釋了 ， 如果你不是很清楚， 建議去溫習(xí)一下Promise 。state 也不作過多的解釋了。
這里我們稍微來提一下 execReducer 和 onChangeState 這兩個函數(shù) 。 execReducer 在前面我們也見過 ， 這個函數(shù)屬于dingDang的系統(tǒng)級函數(shù)，主要用來
輔助你去調(diào)用reducer。  onChangeState 也是一個dingDang系統(tǒng)級函數(shù) ， 這個函數(shù)是便于你直接去修改state中的數(shù)據(jù) 。
我們注意區(qū)分一下reducer 和 onChangeState 的區(qū)別 ， 一般來說reducer的調(diào)用方式如下：

    execReducer("addToCart")(params);

而onChangeState的調(diào)用方式

    onChangeState(jsObjectParams)

我們總結(jié)概括一下，reducer其實是你用來去調(diào)用你自己聲明的指定的一個reducer函數(shù) ， 而onChangeState 其實是直接去修改的state中的值 。 一般來說，
如果你無需做業(yè)務(wù)邏輯， 僅僅只是想把一個數(shù)據(jù)放進(jìn)state ， 我們推薦你使用 onChangeState 的方式， 請不要擔(dān)心rules 的校驗問題 onChangeState 依然
會去執(zhí)行rules的校驗代碼 ， 而如果您不僅僅是將一個數(shù)據(jù)放進(jìn)state ， 在這中間可能還有很多業(yè)務(wù)邏輯代碼， 那么我們推薦你自己去寫一個reducer ， 然后使用
execReducer 來進(jìn)行調(diào)用

initialization 是一個初始化函數(shù) ， 這里不想過多的說什么 ， 主要重點說一下 ， 我們?yōu)檫@個函數(shù)注入了
execReducer 、 execEffect 、 onChangeState

與initialization同理 ， 注入的參數(shù)也相同

高階函數(shù) ， 主要用來調(diào)用 reducer  ， 返回Promise

高階函數(shù) ， 主要用來調(diào)用 effect  ， 返回Promise

簡化修改state中值的方式

用來裝飾一個頁面的入口 ，裝飾之后的頁面 可以使用聲明式注入 demo案例如下

@Page(store)
class Home extends React.Component {


    static injectProps = {
        initName: null,
        name: null
    }

    render() {

        const {injectProps: {initName, name}, onChangeState} = this.props;

        return (
            

                
 {initName} 
                
 {name} 
                 onChangeState({initName: "首屏文字被變化之后"})}>變首屏文字
                
            
        )
    }


}

用來裝飾一個頁面下的子組件，裝飾之后的頁面 可以使用聲明式注入 demo案例如下

@Component
class Card extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            error: ""
        }
    }

    static injectProps = {
        name: null
    }

    render() {

        const {injectProps: {name}} = this.props;

        return (
            

                {name}{this.state.error}
                變換
            
        )
    }

    _onChangeName = () => {
        const {onChangeState} = this.props;
        onChangeState({name: "李四李四李四李四李四李四"}).catch(e => this.setState({error: e}))
    }
}

在組件中使用 static injectProps 的方式可以來聲明 讓dingDang 從store中為你注入哪些數(shù)據(jù)。

在某些業(yè)務(wù)背景下，我們可能需要多個頁面來完整一組業(yè)務(wù)。

假設(shè)我們需要 A B C 3個頁面來完成一組業(yè)務(wù) ， 在這組業(yè)務(wù)中 數(shù)據(jù)其實基本上是相同的， 針對數(shù)據(jù)的某些業(yè)務(wù)操作也是相同的。

在這種背景下，我們提出了場景的概念。

我們對場景的定義：多個頁面之間針對同一組業(yè)務(wù)數(shù)據(jù)進(jìn)行的一連串行為動作來完成的一組業(yè)務(wù)，我們稱之為場景。

普通的Page裝飾器裝飾之后的頁面只能取自己獨立的那份store ， 而使用ScenePage裝飾之后的多個頁面 ， 只要綁定的Store
的namespace相同，那么這個Store的聲明周期將一直存在，直到用戶跳出當(dāng)前場景。

npm install 0.1.1-alpha --save