redux_toolkit_typed_store_counter_slice_with_hooks.ts

1import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'
2import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux'
3
4// 1. Define the state shape
5interface CounterState {
6  value: number
7}
8
9const initialState: CounterState = {
10  value: 0,
11}
12
13// 2. Create the slice
14export const counterSlice = createSlice({
15  name: 'counter',
16  initialState,
17  reducers: {
18    increment: (state) => {
19      state.value += 1
20    },
21    decrement: (state) => {
22      state.value -= 1
23    },
24    // Use the PayloadAction type to declare the contents of `action.payload`
25    incrementByAmount: (state, action: PayloadAction<number>) => {
26      state.value += action.payload
27    },
28  },
29})
30
31export const { increment, decrement, incrementByAmount } = counterSlice.actions
32
33// 3. Configure the store
34export const store = configureStore({
35  reducer: {
36    counter: counterSlice.reducer,
37  },
38})
39
40// 4. Define RootState and AppDispatch types from the store itself
41export type RootState = ReturnType<typeof store.getState>
42export type AppDispatch = typeof store.dispatch
43
44// 5. Create typed versions of useDispatch and useSelector hooks for use in components
45export const useAppDispatch: () => AppDispatch = useDispatch
46export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector