从mobx存储更新输入值

Question

我有一个MobX存储和两个组件，连接到相同的值：

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

const store = makeAutoObservable({
  value: 0,
  setValue: (v) => {
    this.value = v;
  },
});

const ComponentOne = observer(() => {
  function handleOnChange(e) {
    store.setValue(e.target.value);
  }

  return <input value={store.value} onChange={handleOnChange} />;
});

const ComponentTwo = observer(() => {
  function handleOnChange(e) {
    store.setValue(e.target.value);
  }

  return <input value={store.value} onChange={handleOnChange} />;
});

我需要：

更改debounce.的输入值

1. 应使<ComponentTwo/>中的输入值从新的存储值
2. 更新为从组件存储到MobX存储的<ComponentOne/>。

Answer 1

我的解决方案：

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';
import { useDebouncedCallback } from 'use-debounce';

const store = makeAutoObservable({
  value: 0,
  setValue: (v) => {
    this.value = v;
  },
});

export function useStoreValue() {
  const storeValue = store.value;
  const setStoreValue = store.setValue;
  const [value, setValue] = useState(storeValue);

  // eslint-disable-next-line object-curly-newline
  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, 350, { maxWait: 1000 });

  useEffect(
    () => {
      if (storeValue !== value) {
        debouncedSetStoreValue(value);
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [value]
  );

  useEffect(() => {
    setValue(storeValue);
  }, [storeValue]);

  return [value, setValue];
}

const ComponentOne = observer(() => {
  const [value, setValue] = useStoreValue();

  function handleOnChange(e) {
    setValue(e.target.value);
  }

  return <input value={value} onChange={handleOnChange} />;
});

const ComponentTwo = observer(() => {
  const [value, setValue] = useStoreValue();

  function handleOnChange(e) {
    setValue(e.target.value);
  }

  return <input value={value} onChange={handleOnChange} />;
});