Repository: react
Issue: useReducer's dispatch should return a promise which resolves once its action has been delivered
Labels: Type: Feature Request,Component: Hooks

(This is a spinoff from [this thread](https://github.com/facebook/react/issues/15240).)

It's sometimes useful to be able to dispatch an action from within an async function, wait for the action to transform the state, and then use the resulting state to determine possible further async work to do. For this purpose it's possible to define a `useNext` hook which returns a promise of the next value:

```js
function useNext(value) {
  const valueRef = useRef(value);
  const resolvesRef = useRef([]);
  useEffect(() => {
    if (valueRef.current !== value) {
      for (const resolve of resolvesRef.current) {
        resolve(value);
      }
      resolvesRef.current = [];
      valueRef.current = value;
    }
  }, [value]);
  return () => new Promise(resolve => {
    resolvesRef.current.push(resolve);
  });
}
```

and use it like so:

```js
const nextState = useNext(state);

useEffect(() => {
  fetchStuff(state);
}, []);

async function fetchStuff(state) {
  dispatch({ type: 'START_LOADING' });
  
  let data = await xhr.post('/api/data');
  dispatch({ type: 'RECEIVE_DATA', data });
  
  // get the new state after the action has taken effect
  state = await nextState();

  if (!state.needsMoreData) return;

  data = await xhr.post('/api/more-data');
  dispatch({ type: 'RECEIVE_MORE_DATA', data });
}
```


This is all well and good, but `useNext` has a fundamental limitation: it only resolves promises when the state _changes_... so if dispatching an action resulted in the same state (thus causing `useReducer` to [bail out](https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update)), our async function would hang waiting for an update that wasn't coming.

What we _really_ want here is a way to obtain the state after the last dispatch has taken effect, whether or not it resulted in the state changing. Currently I'm not aware of a foolproof way to implement this in userland (happy to be corrected on this point). But it seems like it could be a very useful feature of `useReducer`'s `dispatch` function itself to return a promise of the state resulting from reducing by the action. Then we could rewrite the preceding example as

```js
useEffect(() => {
  fetchStuff(state);
}, []);

async function fetchStuff(state) {
  dispatch({ type: 'START_LOADING' });
  
  let data = await xhr.post('/api/data');
  state = await dispatch({ type: 'RECEIVE_DATA', data });
  
  if (!state.needsMoreData) return;

  data = await xhr.post('/api/more-data');
  dispatch({ type: 'RECEIVE_MORE_DATA', data });
}
```

## EDIT

Thinking about this a little more, the promise returned from `dispatch` doesn't need to carry the next state, because there are other situations where you want to obtain the latest state too and we can already solve that with a simple ref. The narrowly-defined problem is: we need to be able to wait until after a `dispatch()` has taken affect. So `dispatch` could just return a `Promise<void>`:

```js
const stateRef = useRef(state);
useEffect(() => {
  stateRef.current = state;
}, [state]);

useEffect(() => {
  fetchStuff();
}, []);

async function fetchStuff() {
  dispatch({ type: 'START_LOADING' });
  
  let data = await xhr.post('/api/data');

  // can look at current state here too
  if (!stateRef.current.shouldReceiveData) return;
  
  await dispatch({ type: 'RECEIVE_DATA', data });

  if (!stateRef.current.needsMoreData) return;

  data = await xhr.post('/api/more-data');
  dispatch({ type: 'RECEIVE_MORE_DATA', data });
}
```