Skip to content

📡 A React useReducer() hook whose dispatcher supports thunks à la redux-thunk.

License

Notifications You must be signed in to change notification settings

nathanbuchar/react-hook-thunk-reducer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

88eca6a Â· Jun 3, 2022

History

43 Commits
Jun 3, 2022
Apr 24, 2022
Mar 9, 2019
Mar 9, 2019
Mar 10, 2019
Jan 26, 2020
Nov 7, 2019
Jun 3, 2022
Mar 9, 2019
Jan 26, 2020
Mar 9, 2019
Jun 3, 2022
Nov 7, 2019

Repository files navigation

react-hook-thunk-reducer

Akin to redux-thunk, useThunkReducer() augments React's useReducer() hook so that the action dispatcher supports thunks. Now, you can write action creators that return a function rather than an action!

Requires React v16.8 and above.

Npm version Travis David


Install

npm install react-hook-thunk-reducer

Then just import it and use it like you would React.useReducer().

import { useThunkReducer } from 'react-hook-thunk-reducer';

function Component({ initialState }) {
  const [state, dispatch] = useThunkReducer(reducer, initialState);

  // ...
}

Usage

Create your actions just like you would in Redux. Similar to redux-thunk, if an action returns a function, it's treated as a thunk and has access to the current state.

function increment() {
  return {
    type: 'increment'
  };
}

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { count } = getState();

    if (count % 2 !== 0) {
      dispatch(increment());
    }
  };
}

Create your functional component and call the useThunkReducer() hook as if it were React.useReducer();

import { useThunkReducer } from 'react-hook-thunk-reducer';

// ...

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}

function Counter({ initialState }) {
  const [state, dispatch] = useThunkReducer(reducer, initialState);

  // ...

  return (
    <>
      Count: {state.count}
      <button onClick={onButtonPress}>+</button>
    </>
  );
}

Dispatch your actions using the augmented dispatch function.

const onButtonPress = () => {
  dispatch(incrementIfOdd());
};

The value of the inner function will be returned when dispatching thunks.

function incrementAndReturnCount() {
  return (dispatch, getState) => {
    dispatch(increment());

    return getState().count;
  };
}

const newCount = dispatch(incrementAndReturnCount());