Redux

import { createStore } from 'redux'

const initState = {
  name: 'hutchins',
  age: 25
}

const reducer = (state = initState, action) => {
  if (!state) {
    return initState
  }

  if (action.type === 'UPDATE_NAME') {
    return {
      ...state,
      name: action.payload
    }
  } else if (action.type === 'UPDATE_AGE') {
    return {
      ...state,
      age: action.payload
    }
  } else {
    return state
  }
}

const store = createStore(reducer)

const actions = {
  updateName: (name) =>
    store.dispatch({
      type: 'UPDATE_NAME',
      payload: name
    }),
  updateAge: (age) =>
    store.dispatch({
      type: 'UPDATE_AGE',
      payload: age
    })
}

store.subscribe(() => {
  console.info(store.getState())
})

actions.updateAge(20) // {name: "hutchins", age: 20}
actions.updateName('hengheng') // {name: "hengheng", age: 20}

interface Action<T = any> {
  type: T
}

interface AnyAction extends Action {
  // Allows any extra properties to be defined in an action.
  [extraProps: string]: any
}

type Reducer<S = any, A extends Action = AnyAction> = (state: S, action: A) => S

type Store = {
  getState: () => any
  dispatch: (action: AnyAction) => void
  subscribe: (listener: () => void) => { unsubscribe: () => void }
}

const createStore = (reducer: Reducer): Store

export const createStore = (reducer: Reducer): Store => {
  let state: any = null
  let listeners: any[] = []
  // 订阅
  const subscribe = (listener: any) => {
    listeners.push(listener)
    return {
      unsubscribe: () => {
        listeners = listeners.filter((l) => l !== listener)
      }
    }
  }
  // 触发
  const dispatch = (action: AnyAction) => {
    state = reducer(state, action)
    listeners.forEach((l) => l(state))
  }
  // 初始化 state
  dispatch({ type: Symbol('redux init') })

  const getState = () => state

  return {
    getState,
    subscribe,
    dispatch
  }
}