react-hook-thunk-reducer
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.4 • Public • Published

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

    Install

    npm i react-hook-thunk-reducer

    DownloadsWeekly Downloads

    3,008

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    26.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • nathanbuchar