创建redux store流程

// 1 定义ACTION常量
const ADD_COUNT = 'ADD_COUNT'
const MINUS_COUNT = 'MINUS_COUNT'
const CUSTOM_COUNT = 'CUSTOM_COUNT'
const PUSH_TODO = 'PUSH_TODO'
const POP_TODO = 'POP_TODO'

// 2 定义初始值
const initCount = { count: 0 }
const initTodo = { list: [] }

// 3 定义reducer（相当于vuex的mutation，但是不直接修改state，而是返回新的state，即为纯函数）
const counter = function (state = initCount, action) {
  switch (action.type) {
    case ADD_COUNT:
      return { count: state.count + 1 }
    case MINUS_COUNT:
      return { count: state.count - 1 }
    case CUSTOM_COUNT:
      return { count: action.payload.count }
    default:
      break
  }
  return state
}
const todos = function (state = initTodo, action) {
  switch (action.type) {
    case PUSH_TODO:
      return { list: state.list.concat(action.payload.todo) }
    case POP_TODO:
      return { list: state.list.slice(0, state.list.length - 1) }
    default:
      break
  }
  return state
}

// 4 定义action creater（封装了ACTION，方便外部调用而已）
let addCount = () => {
  return { type: ADD_COUNT }
}
let minusCount = () => {
  return { type: MINUS_COUNT }
}
let customCount = (count) => {
  return { type: CUSTOM_COUNT, payload: { count } }
}
let pushTodo = (todo) => {
  return { type: PUSH_TODO, payload: { todo } }
}
let popTodo = () => {
  return { type: POP_TODO }
}

// 5 创建store,combineReducers类似于vuex的合并模块
const store = createStore(combineReducers({ counter, todos }))

// 6 创建action触发函数，可选
addCount = bindActionCreators(addCount, store.dispatch)
minusCount = bindActionCreators(minusCount, store.dispatch)
customCount = bindActionCreators(customCount, store.dispatch)
pushTodo = bindActionCreators(pushTodo, store.dispatch)
popTodo = bindActionCreators(popTodo, store.dispatch)

// 7 监听state变动，可选，一般用于处理业务逻辑
store.subscribe(() => console.log(store.getState()))