Document useDispatcher pattern

To mimic (easily testable) behaviour similar to redux thunk, a pattern such as useDispatcher can be used:

import React, { useReducer } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App(props) {
  var { state, click } = useStore();

  return (
    <div>
      <h1>State: {state}</h1>
      <button onClick={click}>Increment</button>
    </div>
  );
}

function useStore(props) {
  var [ state, dispatch ] = useReducer(reducer, []);
  var { click } = useDispatcher(dispatch, props);

  return {
    state,
    click
  };
}

function useDispatcher(dispatch, props) {
  function click() {
    dispatch({ type: 'click' });
    setTimeout(() => afterclick(), 2000);
  }

  function afterclick() {
    dispatch({ type: 'afterclick' });
  }

  return { click };
}

function reducer(state, { type, dispatch }) {
  switch (type) {
    case "click":
      return [...state, "click wait 2s..."];
    case "afterclick":
      return [...state, "....after"];
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Documenting this pattern may also help to ensure this is an optimised approach, or whether another solution is preferable.

Commencez par l’exemple useDispatcher dans l’issue et examinez la structure de la documentation de React afin de déterminer où ce modèle pourrait être documenté. Comparez-le à un comportement similaire à celui de redux-thunk et déterminez si le modèle est optimisé ou si une autre solution est préférable ; le travail est terminé lorsque la documentation explique clairement la recommandation.