Optimista megjelenítés és useEffect

Ahogyan leírod, úgy hangzik, mintha az összetevőd többi része is hasonló szerkezetű lenne

[state, setState] => useState(initialState)
[paging, setPaging] => useState(initialPaging)
[sorting, setSorting] => useState(initialSort)

useEffect(() => {
  fetch(`https://some-random-api.com/data/page/{paging}/sort/{sorting}`)
    .then(response => response.json())
    .then(data => setState({
      data
    }));
}, [paging, sorting]);

return <div>
    <span>Current page is {paging}</span>
    <Button onClick={() => setPaging(page => page + 1)}>Nav Next</Button>
    <Button onClick={() => setPaging(page => page - 1)}>Nav Prev</Button>
    // ... and so on and so forth
</div>

és ha rákattint a Nav Következő vagy Előző lehetőségre, nem akarja frissíteni a lapozást, amíg az általa kiváltott hatás nincs megoldva. Ha a lekérés sikertelen, akkor nem szeretné, hogy a felhasználó lássa, hogy a lapozás felfelé, majd lefelé csúszik a teendő tisztítás során.

Ennek elérése érdekében nem lehetne késleltetni az "előre néző" értékek beállítását közbenső "reménykedő" vagy "függő" állapotértékekkel? Például ez működne?

[state, setState] => useState(initialState)

// Component state values
[paging, setPaging] => useState(initialPaging)
[sorting, setSorting] => useState(initialSort)

// "Optimist's" state values
[pendingPaging, setPendingPaging] => useState(paging)
[pendingSorting, setPendingSorting] => useState(sorting)

useEffect(() => {
  // checks if current state values differ from pending,
  // meaning app wants to do something
  // If pending and "actual" values match, do nothing
  if( paging !== pendingPaging
    || sorting !== pendingSorting
  ){
      fetch(`https://some-random-api.com/data/page/{paging}/sort/{sorting}`)
        .then(response => response.json())
        .then(data => {
          // things worked, updated component state to match pending
          setPaging(pendingPaging);
          setSorting(pendingSorting);
          setState({data});
        })
        .catch(err => {
          // ugh, I knew things would fail. Let me reset my hopes
          setPendingPaging(paging);
          setpendingSorting(sorting);
          setState({data});
        });
  }
}, [pendingPaging, pendingSorting, paging, sorting, setState]);

return <div>

    // show user "actual" page number
    <span>Current page is {paging}</span>

    // but update only pending values in response to events
    <Button onClick={() => setPendingPaging(page + 1)}>Nav Next</Button>
    <Button onClick={() => setPendingPaging(page - 1)}>Nav Prev</Button>

    // ... and so on and so forth
</div>

Így felállítod a remélt állapotodat, teszel valamit, majd egymáshoz igazítod az állapotodat és az elvárásaidat. Siker esetén a megjelenített állapot az optimista értékekhez igazodik, sikertelenség esetén pedig a függőben lévő értékeket állítja vissza a valóságba.

A legnagyobb probléma, amit látok, az a tény, hogy több setState hívás történik egyszerre, amikor az aszinkronhívás megoldódik. A Reactnek kötegelnie kell ezeket a hívásokat, de érdemes lehet más módszereket keresni a probléma kezelésére. egyetlen hívásban.

Akárhogy is, a függőben lévő és a tényleges értékek megegyeznek, tehát míg a useEffect aktiválódik, nem fut le újabb lekérés.

1. SZERKESZTÉS Köszönjük a pozitív visszajelzést, örülök, hogy tetszik az ötlet. Egyetértek, hogy a bonyolultság nehézkessé válhat, de szerintem létrehozhat egy gyári osztályt, hogy tisztábban kezelje a dolgokat.

Például használhat egy makePessimistic osztályt, amely végül kiadja a „tényleges” állapotot, a „reménykedő” állapotot és legalább egy usePessimisticEffect visszahívást. Az osztály így nézhet ki:

class pessimistFactory {
  constructor(){
    this.state = {};
    this.effects = [];
  }
  // util from https://dzone.com/articles/how-to-capitalize-the-first-letter-of-a-string-in
  ucfirst = (string) => string.charAt(0).toUpperCase() + string.slice(1);

  registerState(param, initialVal){
    this.state[param] = initialVal;
  }

  makePessimisticEffect = (callback, dependencies) => useEffect(() => {
    async function handlePessimistically(){
      try {
        const result = await callback(...dependencies);
        // update theState with result
        setState({...hopefulState, result})
      }catch(err){
        // reset hopefulState and handle error
        setHopefulState({...theState})
      }
    }

    // Do something if some action pending
    if(/* pending and current state not the same */) handlePessimistically();

  }, [callback, dependencies]);

  registerEffect(callback, dependencies = []){
    this.effects.push(
      this.makePessimisticEffect(callback, dependencies)
    );
  }

  makeHooks = () => {
    const initialState = useState(this.state);
    return {
      theState: initialState,
      hopefulState: initialState,
      effects: this.effects
    }
  }
}

És a gyakorlatban:

// Make factory instance
const factory = new pessimistFactory();

// Register state and effects
factory.registerState('paging', initialPaging)
factory.registerState('sorting', initialSorting)
factory.registerEffect('fetchData', () => fetch(`https://some-random-api.com/data/page/{paging}/sort/{sorting}`))

// Make the hooks
const {theState, hopefulState, effects} = factory.makeHooks();

// Implement hooks in component
const SomeComponent = () => {
  const [state, setState] = theState();
  const [pendingState, setPendingState] = hopefulState();

  effects.forEach(useEffect => useEffect());

  return <div>displayed stuff</div>
}

A legbonyolultabb a makePessimisticEffect effektus beállítása a generált setState-ok által létrehozott értékek és visszahívások olvasásához és kezeléséhez, amelyekről tudomásom szerint, ha teljesen tönkrement, ahogy írtam.

Jelenleg nincs időm kitalálni a részleteket, de úgy gondolom, hogy az elérhető új horgokkal, például useCallback.

Ez az ötlet azonban nagyon tetszik, így később, amikor lesz időm, megpróbálom kitalálni. Ha előtte csinálsz egy működő gyári osztályt, vagy ha valakinek van jobb megoldása, ami teljesen más, akkor nagyon érdekelne.