Zustand商店在定制钩子内不工作

Question

我正在尝试移动一些统计和功能到祖站商店。这些函数包含graphql变异调用。所以我不能把这种突变直接从做架店里叫出来。所以我创建了一个定制的钩子来包装作架商店。这个钩子应该返回商店实例，以便我可以从任何地方访问它。

useStore.ts
-----------
import create from 'zustand';

const useStore = () => {
    const [setData] = useMutation(SET_DATA);
    const setA = () => {
        //some mutation call
        store.setState({a: 10})
    }
    const store = create(set => ({
        a: 0,
        setA,
    }))
    return store();
}
export default useStore;

ComponentOne.tsx
----------------

import useStore from 'useStore';

const ComponentOne = () => {
    const { a, setA } = useStore();
    setA();
    return <div>{a}</div>
}

ComponentTwo.tsx
----------------

import useStore from 'useStore';

const ComponentTwo = () => {
    const { a } = useStore();
    return <div>{a}</div>
}

在第二个组件中，a的值始终保持在0。它应该是10。

Answer 1

在实际使用中，将useStoreZu.js文件定义如下：

const useStoreZu = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))

export {
   useStoreZu
}

组件ComponentOne.js的用法如下：

import {useStoreZu }from './usezutand';

export default function ComponentOne() {
    const { bears,increasePopulation ,removeAllBears } = useStoreZu();
    return (<div>
        <button onClick={
            (e)=>{e.preventDefault();
            increasePopulation();
        }}>
            click increasePopulation me
        </button>
        {bears}
        <hr/>
    </div>)
}

组件ComponentTwo.js的用法如下：

import {useStoreZu }from './usezutand';

export default function ComponentTwo(){
    const { bears } = useStoreZu();
    return <div>{bears}</div>
}

更新：useStoreZu.js到以下定义，使用zustand/middleware添加订阅和选择器，可以定义GraphQL外部的钩子函数查询函数，参考文档地址中间件

const useStoreZu = create(
    subscribeWithSelector(() => ({ paw: 10, snout: true, fur: 14.0 }))
);

添加：ComponentThree.js是一个函数组件，它使用订阅和选择器函数，代码如下所示，存储状态的值可以重写。

import { zustandStore }from './usezutand';
import { subscribeWithSelector } from 'zustand/middleware';

export default function ComponentThree(){
    const store =  zustandStore;
    const { getState, setState, subscribe, destroy } = store;
    var unsub = undefined;//subscribe
    let paw = store.getState().paw;
    const snout = store.getState().snout;
    const fur = store.getState().fur;
    console.log('paw_' + paw +' _' +'snout_ ' + snout + '_' + 'fur_' + fur);
    console.log('getState_' + getState +'\n' +'setState_ ' + setState + '\n' 
        + 'subscribe_' + subscribe);
    // Destroying the store (removing all listeners)
    const settingUnSubscribe = ()=>{
        if (unsub != undefined) {
            unsub();
        }
        store.destroy();
    }
    // Listening to all changes, fires synchronously on every change
    const settingSubscribe = ()=>{
        unsub= subscribe(state => state.paw, custSubcribeFunc(paw));
    }
    const custSubcribeFunc = (paw)=>{
        store.setState({ paw: store.getState().paw + 1 });
        paw = store.getState().paw;
        console.log('paw __ ' + paw);
    }
    return (<div>
            <button onClick={
                (e)=>{e.preventDefault();
                settingSubscribe();
            }}>
                click subscribe me
            </button>
            {paw}
            <hr/>
            <button onClick={
                (e)=>{e.preventDefault();
                settingUnSubscribe();
            }}>
                click unsubscribe me
            </button>
            <hr/>
        </div>)
}

希望能帮助你