@feige0629/react-common-store

1、使用方法

yarn add @feige0629/react-common-store

npm install @feige0629/react-common-store

调用

import * as React from "react";
import { StoreRoot } from "@feige0629/react-common-store";

export default function App() {
    return (
        <StoreRoot>
            ...
        </StoreRoot>
    );
}

定义数据

import { initState, compute } from "@feige0629/react-common-store";

export const $showGuides = initState<boolean>(true);
export const $selectedFlattenLayers = compute(({ get }) => {
    const layerManager = get($layerManager)!;
    const selectedLayers = get($selectedLayers)!;

    return layerManager.toFlatten(selectedLayers);
});

使用

import { useStoreRoot, useStoreStateSetPromise, useStoreStateValue, useStoreValue, useStoreState } from "@feige0629/react-common-store";
import { $showGuides, $selectedFlattenLayers } from "./stores";

// 第一种
const root = useStoreRoot();
const layers = root.get($layers);
root.set($layers, '新数据');


// 第二种
useStoreValue($showGuides, '新数据'); // 绑定全局数据

const showGuidesStore = useStoreValue($showGuides); // 获取数据
const value = showGuidesStore.value;

showGuidesStore.update(value); // 设置数据

// 第三种
const showGuidesStore = useStoreStateValue($showGuides); // 仅仅用来获取数据

// 第四种
const showGuidesStore = useStoreStateSetPromise($showGuides);
showGuidesStore('新数据').then(complete => { // 设置数据
    if (!complete) {
        return false;
    }
    
    ....

    return complete;
});

// 第五种
const [guidelines, setGuidelines] = useStoreState($showGuides);
guidelines // 获取数据
setGuidelines('新数据') // 设置数据

// 第六种
const setShowGuidesValue = useStoreStateSetValue($showGuides);
setShowGuidesValue('新数据') // 设置数据