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.


Install

``bash
npm install react-hook-thunk-reducer
`

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

`js
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.

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

`js
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}
+

);
}
`

Dispatch your actions using the augmented dispatch function.

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

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

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

return getState().count;
};
}

const newCount = dispatch(incrementAndReturnCount());
``