useReducer middleware

[wardoost]

Extend the standard useReducer with a dispatcher that can handle "thunks" similar to redux-thunk. It could look something like this:

export const useThunkReducer = (reducer, initialState) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const thunkDispatch = action => {
    if (typeof action === "function") {
      return action(dispatch, state);
    }

    return dispatch(action);
  };

  return [state, thunkDispatch];
}

Something similar was described in this article: https://medium.com/yld-engineering-blog/rolling-your-own-redux-with-react-hooks-and-context-bbeea18b1253

[streamich]

An interesting hook would be that allows to add any Redux middleware.

const useMyReducer = applyMiddleware(useReducer, [logging, thunks, ...]);

[wardoost]

I have created a createReducer factory function the that takes middleware like Redux's applyMiddleware and returns a reducer that can be used like React's useReducer. While it looks handy to be able to use redux middleware, I am not sure if it's useful enough to add to this library.

Also, there are already a few repositories that have been doing Redux things with hooks (redux-react-hook, redux-hooks) but experienced issues and react-redux is working on a hooks API: reduxjs/react-redux#1179.

[wardoost]

I noticed that getState always returns the current state which is problematic for redux middleware. With the current storybook example you can see the prev state and next state are the same which is incorrect behaviour:

In order to fix this we need a getState function that always returns the correct state. As far as I know this is not possible with useReducer? This issue does not stop us from creating a useThunkReducer hook though.

[streamich]

🎉 This issue has been resolved in version 9.4.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀