docs: createReducer

README.md

@@ -113,6 +113,7 @@
     <br/>
 - [**State**](./docs/State.md)
   - [`createMemo`](./docs/createMemo.md) &mdash; factory of memoized hooks.
+  - [`createReducer`](./docs/createReducer.md) &mdash; factory of reducer hooks with custom middleware.
   - [`useGetSet`](./docs/useGetSet.md) &mdash; returns state getter `get()` instead of raw state.
   - [`useGetSetState`](./docs/useGetSetState.md) &mdash; as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
   - [`usePrevious`](./docs/usePrevious.md) &mdash; returns the previous state or props.

docs/createReducer.md

@@ -0,0 +1,57 @@
+# `createReducer`
+
+Factory for reducer hooks with custom middleware with an identical API as [React's `useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer). Compatible with [Redux middlware](https://redux.js.org/advanced/middleware).
+
+## Usage
+
+An example with [`redux-thunk`](https://github.com/reduxjs/redux-thunk) and [`redux-logger`](https://github.com/LogRocket/redux-logger).
+
+```jsx
+import {createReducer} from 'react-use';
+import thunk from 'redux-thunk';
+import logger from 'redux-logger';
+
+const useThunkReducer = createReducer(thunk, logger);
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'increment':
+      return { count: state.count + 1 };
+    case 'decrement':
+      return { count: state.count - 1 };
+    case 'reset':
+      return init(action.payload);
+    default:
+      throw new Error();
+  }
+}
+
+const Demo = () => {
+  const addAndReset = React.useCallback(() => {
+    return dispatch => {
+      dispatch({ type: 'increment' });
+
+      setTimeout(() => {
+        dispatch({ type: 'reset', payload: 1 });
+      }, 1000);
+    };
+  }, []);
+
+  const [count, dispatch] = useThunkReducer(reducer, 1);
+
+  return (
+    <div>
+      <p>count: {count}</p>
+      <button onClick={() => dispatch(addAndReset())}>Add and reset</button>
+      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
+      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
+    </div>
+  );
+};
+```
+
+## Reference
+
+```js
+const useMiddlewareReducer = createReducer(...middlewares);
+```

src/__stories__/createReducer.story.tsx

@@ -4,6 +4,7 @@ import logger from 'redux-logger';
 import thunk from 'redux-thunk';
 
 import { createReducer } from '..';
+import ShowDocs from './util/ShowDocs';
 
 const useThunkReducer = createReducer(thunk, logger);
 
@@ -46,10 +47,11 @@ const Demo = ({ initialCount = 1 }) => {
       <button onClick={() => dispatch({ type: 'reset', payload: initialCount })}>Reset</button>
       <button onClick={() => dispatch({ type: 'increment' })}>+</button>
       <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
+      <p>Open your developer console to see actions logged by middleware</p>
     </div>
   );
 };
 
 storiesOf('State|createReducer', module)
-  // .add('Docs', () => <ShowDocs md={require('../../docs/createMemo.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../../docs/createReducer.md')} />)
   .add('Demo', () => <Demo />);