react-state-x

react state manage utility

const context = createContext({

})

// 小写开头的consumer是一个装饰器, 可以将数据从组建props传入
@context.consumer
class X extends Component {}

this.props.loading
this.props.set

this.context.set // 修改属性 只能通过setter/set方法来修改 只能修改创建时候声明的对象 无法修改附加上的对象

// OR
(<Consumer children={...} />) // 传统方式

// api也是一个特殊的context, 提供了loading, 取消, 分页
const api = createApi('/path', {
    method: 'GET',
    query: {page: 1} // 默认参数
 })

class List extends Component { 
    static contextType = {
        api,
        context
    } 
    componentDidMount() {
        this.context.api({page: 2}); // 如果api与contextType冲突, 考虑换成api.fetch
        this.context.api.loading;
        this.context.api.nextPage();  
    }
}

// 对特殊异步操作的封装, 类似api但是没有网络请求(api可以基于此), 比如异步按钮
const effect = createEffect(async () => {})

this.conetxt.effect.loading