Redux State Example

actions.ts

import { BalanceActionType, AddAction, WithdrawAction } from "./types"

export const add = (amount: number): AddAction => ({
    type: BalanceActionType.ADD,
    payload: amount,
})

export const withdraw = (amount: number): WithdrawAction => ({
    type: BalanceActionType.WITHDRAW,
    payload: amount,
})

reducers.ts

import { BalanceAction, BalanceActionType, BalanceState } from "./types"

const initialState: BalanceState = {
    balance: 1000,
}

export const balanceReducer = (
    state: BalanceState = initialState,
    action: BalanceAction,
): BalanceState => {
    switch (action.type) {
        case BalanceActionType.ADD:
            return { ...state, balance: state.balance + action.payload }

        case BalanceActionType.WITHDRAW:
            return { ...state, balance: state.balance - action.payload }

        default:
            return state
    }
}

store.ts

import { combineReducers, createStore } from "redux"
import { balanceReducer } from "./reducers"
import { BalanceState } from "./types"

const rootReducer = combineReducers({
    balance: balanceReducer,
})

export interface State {
    balance: BalanceState
}

export const store = createStore(rootReducer, undefined)

types.ts

import { Action } from "redux"

export interface BalanceState {
    balance: number
}

export enum BalanceActionType {
    ADD = "ADD",
    WITHDRAW = "WITHDRAW",
}

export interface AddAction extends Action {
    type: BalanceActionType.ADD
    payload: number
}

export interface WithdrawAction extends Action {
    type: BalanceActionType.WITHDRAW
    payload: number
}

export type BalanceAction = AddAction | WithdrawAction