reactjs - Användning av mobx i anpassade react-hookar

Vi använder anpassade hooks i vår app för att anropa automatiska analys-/allmänna hooks som använder const user=useObserver(() => userStore.user); för att skicka analyser (komponenters livscykler/allmän användning)

Men jag har sett att useObserver-hooken i mobx är föråldrad:

Kunde inte hitta något mönster för mobx-användning med egna hooks (hooks kan inte använda observer), det verkar som det rätta sättet är att skicka tillståndet genom en komponent useCustomHook(user); vilket inte är rent om vi behöver göra det i alla våra komponenter i appen.

Undrar vilket som är rätt mönster att göra det med användning av mobx-tillstånd i egna hooks.

Tack.

Svar #1

Du kan använda mobx-reaktioner för detta ändamål eftersom hooks bara är funktioner och reaktioner passar idealiskt för dina krav och behöver inga bindningar.

I din hook skulle jag använda React useEffect för att ställa in en reaktion, men du bör komma ihåg att du alltid bör dispose den för att undvika minnesläckor. autorun är också möjligt, men reaction ger dig möjlighet att exakt kontrollera vad du vill spåra.

Här är en fungerande lekplats där du kan se standard observer-komponent och komponent med anpassad hook. Båda speglar MobX-observable förändring.

Koden för den anpassade hooken från lekplatsen:

const useCustomHook = (appState) => {
  // should reflect the appState value change
  const [valueType, setValueType] = useState("ZERO VALUE");

  useEffect(() => {
    // using mobx reaction in the hook (the reaction can be used anywhere)

    const reactionDisposer = reaction(
      // should pass the required store.
      // Could be done by DI, direct instance injection
      // or passing into hook from the parent component etc.
      () => appState.value,
      (value) => {
        if (value % 2) {
          setValueType("EVEN");
        } else {
          setValueType("ODD");
        }
      }
    );

    return () => {
      reactionDisposer();
    };
  }, []);

  return valueType;
};

Vänliga hälsningar.

Relaterade artiklar