Add useSelector and useDispatch example (#207)

Author: ivankoleda

README.md

@@ -106,6 +106,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre
   - [Redux Connected Components](#redux-connected-components)
     - [- Redux connected counter](#--redux-connected-counter)
     - [- Redux connected counter with own props](#--redux-connected-counter-with-own-props)
+    - [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks)
     - [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration)
   - [Context](#context)
     - [ThemeContext](#themecontext)
@@ -132,6 +133,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre
   - [Selectors with `reselect`](#selectors-with-reselect)
   - [Connect with `react-redux`](#connect-with-react-redux)
     - [Typing connected component](#typing-connected-component)
+    - [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch)
     - [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration)
 - [Configuration & Dev Tools](#configuration--dev-tools)
   - [Common Npm Scripts](#common-npm-scripts)
@@ -874,6 +876,26 @@ export default () => (
 
 [⇧ back to top](#table-of-contents)
 
+### - Redux connected counter via hooks
+
+```tsx
+import * as React from 'react';
+import { FCCounter } from '../components';
+import { increment } from '../features/counters/actions';
+import { useSelector, useDispatch } from '../store/hooks';
+
+const FCCounterConnectedHooksUsage: React.FC = () => {
+  const counter = useSelector(state => state.counters.reduxCounter);
+  const dispatch = useDispatch();
+  return <FCCounter label="Use selector" count={counter} onIncrement={() => dispatch(increment())}/>;
+};
+
+export default FCCounterConnectedHooksUsage;
+
+```
+
+[⇧ back to top](#table-of-contents)
+
 ### - Redux connected counter with `redux-thunk` integration
 
 ```tsx
@@ -1703,6 +1725,27 @@ const mapDispatchToProps = (dispatch: Dispatch<MyTypes.RootAction>) =>
 
 ```
 
+[⇧ back to top](#table-of-contents)
+
+### Typing `useSelector` and `useDispatch`
+
+```tsx
+import { Dispatch } from 'redux';
+import {
+  TypedUseSelectorHook,
+  useSelector as useGenericSelector,
+  useDispatch as useGenericDispatch
+} from 'react-redux';
+import { RootState, RootAction } from 'MyTypes';
+
+export const useSelector: TypedUseSelectorHook<RootState> = useGenericSelector;
+
+export const useDispatch: () => Dispatch<RootAction> = useGenericDispatch;
+
+```
+
+[⇧ back to top](#table-of-contents)
+
 ### Typing connected component with `redux-thunk` integration
 
 *__NOTE__: When using thunk action creators you need to use `bindActionCreators`. Only this way you can get corrected dispatch props type signature like below.*

README_SOURCE.md

@@ -106,6 +106,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre
   - [Redux Connected Components](#redux-connected-components)
     - [- Redux connected counter](#--redux-connected-counter)
     - [- Redux connected counter with own props](#--redux-connected-counter-with-own-props)
+    - [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks)
     - [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration)
   - [Context](#context)
     - [ThemeContext](#themecontext)
@@ -132,6 +133,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre
   - [Selectors with `reselect`](#selectors-with-reselect)
   - [Connect with `react-redux`](#connect-with-react-redux)
     - [Typing connected component](#typing-connected-component)
+    - [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch)
     - [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration)
 - [Configuration & Dev Tools](#configuration--dev-tools)
   - [Common Npm Scripts](#common-npm-scripts)
@@ -374,6 +376,12 @@ Adds error handling using componentDidCatch to any component
 
 [⇧ back to top](#table-of-contents)
 
+### - Redux connected counter via hooks
+
+::codeblock='playground/src/hooks/react-redux-hooks.tsx'::
+
+[⇧ back to top](#table-of-contents)
+
 ### - Redux connected counter with `redux-thunk` integration
 
 ::codeblock='playground/src/connected/fc-counter-connected-bind-action-creators.tsx'::
@@ -641,6 +649,14 @@ const mapDispatchToProps = (dispatch: Dispatch<MyTypes.RootAction>) =>
 
 ```
 
+[⇧ back to top](#table-of-contents)
+
+### Typing `useSelector` and `useDispatch`
+
+::codeblock='playground/src/store/hooks.ts'::
+
+[⇧ back to top](#table-of-contents)
+
 ### Typing connected component with `redux-thunk` integration
 
 *__NOTE__: When using thunk action creators you need to use `bindActionCreators`. Only this way you can get corrected dispatch props type signature like below.*

playground/src/hooks/react-redux-hooks.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { FCCounter } from '../components';
+import { increment } from '../features/counters/actions';
+import { useSelector, useDispatch } from '../store/hooks';
+
+const FCCounterConnectedHooksUsage: React.FC = () => {
+  const counter = useSelector(state => state.counters.reduxCounter);
+  const dispatch = useDispatch();
+  return <FCCounter label="Use selector" count={counter} onIncrement={() => dispatch(increment())}/>;
+};
+
+export default FCCounterConnectedHooksUsage;

playground/src/store/hooks.ts

@@ -0,0 +1,11 @@
+import { Dispatch } from 'redux';
+import {
+  TypedUseSelectorHook,
+  useSelector as useGenericSelector,
+  useDispatch as useGenericDispatch
+} from 'react-redux';
+import { RootState, RootAction } from 'MyTypes';
+
+export const useSelector: TypedUseSelectorHook<RootState> = useGenericSelector;
+
+export const useDispatch: () => Dispatch<RootAction> = useGenericDispatch;