Redux Cheat Sheet (w/ Redux Toolkit)

appStore.ts

import { configureStore } from '@reduxjs/toolkit'
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import { counterSlice } from './counterSlice'

export const appStore = configureStore({
    reducer: {
        counter: counterSlice.reducer
    }
})

export type AppState = ReturnType<typeof appStore.getState>
export type AppDispatch = typeof appStore.dispatch

export const useAppDispatch = useDispatch as typeof useDispatch<AppDispatch>
export const useAppSelector = useSelector as TypedUseSelectorHook<AppState>

counter.tsx

import { useCallback } from 'react'
import { counterSlice } from '../slices/counterSlice'
import { AppState, appStore, useAppDispatch, useAppSelector } from '../stores/appStore'

function selectCounterState(state: AppState): number {
    return state.counter.value
}

export const Counter = () => {
    const count = useAppSelector(selectCounterState)
    const dispatch = useAppDispatch()

    const handleDecrement = useCallback(() => {
        dispatch(counterSlice.actions.decrement())
    }, [])

    const handleIncrement = useCallback(() => {
        dispatch(counterSlice.actions.increment())
    }, [])

    return (
        <section>
            <h2>Count: {count}</h2>
            <button onClick={handleDecrement}>
                Decrement
            </button>
            <button onClick={handleIncrement}>
                Increment
            </button>
        </section>
    )
}

counterSlice.ts

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
    name: 'counter',
    initialState: {
        value: 0
    },
    reducers: {
        increment: state => {
            state.value++
        },
        decrement: state => {
            state.value--
        },
        incrementByAmount: (state, action) => {
            state.value += action.payload
        }
    }
})

index.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'

import './index.css'

import { App } from './App'
import { appStore } from './appStore'

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
    <React.StrictMode>
        <Provider store={appStore}>
            <App />
        </Provider>
    </React.StrictMode>
);