Skip to content

nathanbuchar/react-hook-thunk-reducer

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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());

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •