redux setup

redux.ts

import { createStore } from 'redux'

type OPEN_MODAL = {
    type: 'OPEN_MODAL'
    modal_type: string
}

type CLOSE_MODAL = {
    type: 'CLOSE_MODAL'
}

type UPDATE_USER = {
    type: 'UPDATE_USER'
    user: {
        id: string
        name: string
    }
}

type Action = OPEN_MODAL | CLOSE_MODAL | UPDATE_USER

const initialState = {
    modal: {
        opened: false,
        id: ''
    },
    user: {
        id: '',
        name: ''
    }
}

/**
 * This is a reducer - a function that takes a current state value and an
 * action object describing "what happened", and returns a new state value.
 * A reducer's function signature is: (state, action) => newState
 *
 * The Redux state should contain only plain JS objects, arrays, and primitives.
 * The root state value is usually an object. It's important that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * You can use any conditional logic you want in a reducer. In this example,
 * we use a switch statement, but it's not required.
 */
function globalReducer(state = initialState, action: Action) {
    switch (action.type) {
    case 'OPEN_MODAL':
        if (!action.modal_type) throw new Error('Modal type is required')

        return {
            ...state,
            modal: {
                opened: true,
                id: action.modal_type
            }
        }
    case 'CLOSE_MODAL':
        return {
            ...state,
            modal: {
                opened: false,
                id: ''
            }
        }
    case 'UPDATE_USER':
        return {
            ...state,
            user: {
                id: action.user.id,
                name: action.user.name
            }
        }
    default:
        return state
    }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
const store = createStore(globalReducer)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// There may be additional use cases where it's helpful to subscribe as well.

store.subscribe(() => console.log(store.getState()))

export const openModal = (modal_type: string) => {
    store.dispatch({ type: 'OPEN_MODAL', modal_type })
}

export const closeModal = () => {
    store.dispatch({ type: 'CLOSE_MODAL' })
}

export const updateUser = (user: { id: string, name: string }) => {
    store.dispatch({ type: 'UPDATE_USER', user })
}

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'OPEN_MODAL', modal_type: 'update' })
// { modal: { opened: true, id: 'update' }, user: { id: '', name: '' } }
store.dispatch({ type: 'OPEN_MODAL', modal_type: 'login' })
// { modal: { opened: true, id: 'login' }, user: { id: '', name: '' } }
store.dispatch({ type: 'CLOSE_MODAL' })
// { modal: { opened: false, id: '' }, user: { id: '', name: '' } }
store.dispatch({ type: 'UPDATE_USER', user: { id: '1', name: 'John Doe' } })
// { modal: { opened: false, id: '' }, user: { id: '1', name: 'John Doe' } }