Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nathanbuchar/react-hook-thunk-reducer
📡 A React useReducer() hook whose dispatcher supports thunks à la redux-thunk.
https://github.com/nathanbuchar/react-hook-thunk-reducer
hook react reducer redux thunk
Last synced: 13 days ago
JSON representation
📡 A React useReducer() hook whose dispatcher supports thunks à la redux-thunk.
- Host: GitHub
- URL: https://github.com/nathanbuchar/react-hook-thunk-reducer
- Owner: nathanbuchar
- License: mit
- Created: 2019-03-09T21:30:32.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-03T17:29:40.000Z (over 2 years ago)
- Last Synced: 2024-11-04T04:06:48.522Z (16 days ago)
- Topics: hook, react, reducer, redux, thunk
- Language: JavaScript
- Homepage:
- Size: 136 KB
- Stars: 107
- Watchers: 3
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hook-thunk-reducer
> Akin to [redux-thunk](https://www.npmjs.com/package/redux-thunk), `useThunkReducer()` augments React's [`useReducer()`](https://reactjs.org/docs/hooks-reference.html#usereducer) hook so that the action dispatcher supports [thunks](https://en.wikipedia.org/wiki/Thunk). Now, you can write action creators that return a function rather than an action!
>
> Requires React v16.8 and above.
[](https://npmjs.org/package/react-hook-thunk-reducer)
[](https://travis-ci.org/nathanbuchar/react-hook-thunk-reducer?branch=master)
[](https://david-dm.org/nathanbuchar/react-hook-thunk-reducer)
## 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](https://www.npmjs.com/package/redux-thunk), if an action returns a function, it's treated as a [thunk](https://en.wikipedia.org/wiki/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());
```