redux重构（七）统一管理Action类型 & Reducer业务方法拆分 & 状态持久化

统一管理Action类型 & Reducer业务方法拆分 & 状态持久化

统一管理Action类型

新建src/store/ActionTypes.js

/*
  统一管理Action的类型
*/
export const TODOS_ADD = 'TODOS_ADD'
export const TODOS_DELETE = 'TODOS_DELETE'
export const TODOS_TOGGLE_ITEM = 'TODOS_TOGGLE_ITEM'
export const TODOS_TOGGLE_ALL = 'TODOS_TOGGLE_ALL'
export const TODOS_SHOW_EDIT_INPUT = 'TODOS_SHOW_EDIT_INPUT'
export const TODOS_EDIT_ETITLE = 'TODOS_EDIT_ETITLE'
export const TODOS_TOGGLE_TYPE = 'TODOS_TOGGLE_TYPE'
export const TODOS_CLEAR_ALL = 'TODOS_CLEAR_AL'

组件拆分

• 容器组件和展示组件(傻瓜组件)的拆分
  • 容器组件用于处理业务并且向展示组件提供数据
  • 展示组件用于把props数据渲染到模板中

Reducer业务方法拆分

在src/store/Reducer.js

import * as service from './Service.js'

switch(action.type){
  case ActionTypes.TODOS_ADD:
    // 添加任务
    return service.add(state, action)

src/store/Service.js

export const add = (state, action) => {
  // 添加任务
  let newState = JSON.parse(JSON.stringify(state))
  // 获取所有任务的id
  let ids = newState.todos.map(item => {
    return item.id
  })
  // 计算所有任务ID的最大值
  let maxId = Math.max.apply(null, ids) + 1
  let todo = {
    id: maxId,
    etitle: action.etitle,
    done: false,
    isEdit: false
  }
  // 添加任务
  newState.todos.push(todo)
  return newState
}

状态持久化

• 订阅Store数据变化

src/store/Store.js

// 订阅数据的变化
store.subscribe(() => {
  // 将最新的Store数据缓存起来
  localStorage.setItem('todos', JSON.stringify(store.getState()))
})

• 初始化数据时，从本地缓存获取数据

let todos = localStorage.getItem('todos')
if (todos) {
  initValue = JSON.parse(todos)
}