拆分文件和优化后的代码

在这个文档中的导出导入方式都是用的module.exports和require，这是node.js环境提供的commonJS的方法 而不是一般使用的ES6的方法：export和import

redux代码优化

1. 将派发的action生成过程放到一个actioniCreators函数中
2. 将定义的所有actionCreators的函数，放到一个独立的文件中：actionCreators.js
3. actionCreators和reducer函数中使用字符串常量是一致的，所以将常量抽取到一个独立constants的文件中
4. 将reducer和默认值(initialState)放到一个独立的reducer.js文件中，而不是在index.js

一般的文件结构：

• store
  • actionCreators.js => 用来储存创建action的函数
  • constants.js => 用来储存用到的常量，如type字符串
  • index.js => 用来创建和储存store
  • reducer.js => 用来放初始化的数据和定义reducer函数

redux结构划分

• 创建store/index.js文件
• 创建store/reducer.js文件
• 创建store.actionCreators.js文件
• 创建store.constants.js文件

一个例子

index.js

const { createStore } = require('redux')
const reducer = require("./reducer")

// 创建的store
const store  = createStore(reducer)

module.exports = store

reducer.js

const { ADD_NUMBER, CHANGE_NAME } = require("./constants")

// 初始化的数据
const initialState = {
  name: "lwt",
  counter: 100
}


// 定义reducer函数：纯函数
function reducer(state = initialState, action) {
  switch(action.type) {
    case CHANGE_NAME:
      return {...state, name: action.name}
    case ADD_NUMBER:
      return {...state, counter: state.counter + action.num}
    default:
      return state
  }
}

module.exports = reducer

actionCreators.js

const { CHANGE_NAME, ADD_NUMBER } = require("./constants")

const changeNameAction = (name) => ({
  type: CHANGE_NAME,
  name
})


const addNumAction = (num) => ({
  type: ADD_NUMBER,
  num
})

module.exports = {
  changeNameAction,
  addNumAction
}

constants.js

const ADD_NUMBER = "add_num"
const CHANGE_NAME = "change_name"

module.exports = {
  ADD_NUMBER,
  CHANGE_NAME
}