Merge pull request #36 from msutkowski/add-typed-hooks

template/src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

template/src/app/store.ts

@@ -7,6 +7,7 @@ export const store = configureStore({
   },
 });
 
+export type AppDispatch = typeof store.dispatch;
 export type RootState = ReturnType<typeof store.getState>;
 export type AppThunk<ReturnType = void> = ThunkAction<
   ReturnType,

template/src/features/counter/Counter.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
 import {
   decrement,
   increment,
@@ -8,10 +7,11 @@ import {
   selectCount,
 } from './counterSlice';
 import styles from './Counter.module.css';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
 
 export function Counter() {
-  const count = useSelector(selectCount);
-  const dispatch = useDispatch();
+  const count = useAppSelector(selectCount);
+  const dispatch = useAppDispatch();
   const [incrementAmount, setIncrementAmount] = useState('2');
 
   return (

template/src/features/counter/counterSlice.ts

@@ -44,7 +44,7 @@ export const incrementAsync = (amount: number): AppThunk => dispatch => {
 
 // The function below is called a selector and allows us to select a value from
 // the state. Selectors can also be defined inline where they're used instead of
-// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
+// in the slice file. For example: `useAppSelector(state => state.counter.value)`
 export const selectCount = (state: RootState) => state.counter.value;
 
 export default counterSlice.reducer;