Tengo una tienda MobX y 2 Componentes, conectados al mismo valor:
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} />; });Necesito:
<ComponentOne/> debería hacer que el valor de entrada en <ComponentTwo/> se actualice desde el nuevo valor almacenadoMi solución:
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} />; });