Add Example for useReducer with types. (piotrwitek#118)

* Add example for useReducer

* Update React

* Fix text for useReducer document

* Add "Hooks" to table content

* Add the documentation for hooks to README

* Decrale Action as typesage

* Remvoe ^ prefix from package.json

Author: sosukesuzuki

README.md

@@ -52,6 +52,7 @@ This gives you the power to prioritize our work and support the project contribu
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
   - [Redux Connected Components](#redux-connected-components)
+  - [Hooks](#hooks)
 - [Redux](#redux)
   - [Action Creators](#action-creators) 📝 __UPDATED__
   - [Reducers](#reducers) 📝 __UPDATED__
@@ -756,6 +757,66 @@ export default () => <SFCCounterConnectedExtended label={'SFCCounterConnectedExt
 
 [⇧ back to top](#table-of-contents)
 
+## Hooks
+
+> https://reactjs.org/docs/hooks-intro.html
+
+#### - useReducer
+Hook for state management like Redux in a function component.
+
+```tsx
+import * as React from 'react';
+
+interface State {
+  count: number;
+}
+
+type Action  =
+  | { type: 'reset' }
+  | { type: 'increment' }
+  | { type: 'decrement' };
+
+const initialState: State = {
+  count: 0,
+};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'reset':
+      return initialState;
+    case 'increment':
+      return { count: state.count + 1 };
+    case 'decrement':
+      return { count: state.count - 1 };
+    default:
+      return state;
+  }
+}
+
+interface CounterProps {
+  initialCount: number;
+}
+
+function Counter({ initialCount }: CounterProps) {
+  const [state, dispatch] = React.useReducer<State, Action>(reducer, {
+    count: initialCount,
+  });
+  return (
+    <>
+      Count: {state.count}
+      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
+      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
+      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
+    </>
+  );
+}
+
+export default Counter;
+
+```
+
+[⇧ back to top](#table-of-contents)
+
 ---
 
 # Redux

docs/markdown/1_react.md

@@ -202,3 +202,14 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
 ::usage='../../playground/src/connected/sfc-counter-connected-extended.usage.tsx'::
 
 [⇧ back to top](#table-of-contents)
+
+## Hooks
+
+> https://reactjs.org/docs/hooks-intro.html
+
+#### - useReducer
+Hook for state management like Redux in a function component.
+
+::example='../../playground/src/hooks/use-reducer.tsx'::
+
+[⇧ back to top](#table-of-contents)

docs/markdown/_toc.md

@@ -8,6 +8,7 @@
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
   - [Redux Connected Components](#redux-connected-components)
+  - [Hooks](#hooks)
 - [Redux](#redux)
   - [Action Creators](#action-creators) 📝 __UPDATED__
   - [Reducers](#reducers) 📝 __UPDATED__