state-delegate

将状态委托给一个HOC，摆脱重复的状态维护

使用场景

• loading、modal 元素的隐藏和显示
• 常量状态的切换

使用方法

• 安装

$ npm install --save @followwinter/state-delegate
// 或者
$ yarn add  @followwinter/state-delegate

• 引入

import StateDelegate from 'state-delegate'

• 使用

import React from 'react';
import StateDelegate from 'state-delegate'

class App extends React.Component {
    componentDidMount() {
        // 改变状态
        const {loading} = this.props
        loading.show()
        setTimeout(() => {
            loading.hide()
        }, 3000)
    }

    render() {
        绑定状态
        const {loading} = this.props
        return <div>{
            loading.value ? '加载中' : '加载完成'
        }</div>
    }
}
// 声明状态
export default StateDelegate({
    loading: {
        show: true,
        hide: false
    }
})(App);

API

StateDelegate({
    [state]:{
        [action_name]:[value]
        ///...
    }
})(WrappedComponent)

• state: 状态的名称，WrappedComponent可以通过 this.props[state]来访问
• action_name: 动作的名称，每一个动作对应一个函数，WrappedComponent中可以通过this.props[state][action_name]()来执行动作，执行之后，该state就会变成action_name对应的值
• value：执行动作之后，state的值

栗子：

• 有如下定义

export default StateDelegate({
    loading: {
        show: true,
        hide: false
    }
})(App);

• 则在APP中

const {loading} = this.props
console.log(loading) //{value:false,show:()=>,hide:()=>,setState:(value)=>{}}
console.log(loading.value) // false
loading.show()
console.log(loading.value) // true
loading.hide()
console.log(loading.value) // false