react篇之redux的优化

我们第一次使用redux的时候可能是下面的写法和使用方法

//首先是安装　和　引入　redux
npm install redux -S   //安装 
import { createStore } from "redux"  //引入
// 然后就直接在 app.js文件中进行书写了 (我以一个累加器举例)
function reducer(state=0,action){
     if(action.type=='add'){
		return state+1;
	}else{
	    return state-1
	}else{
		return state
	}
}
//当然你也可以使用switch的写法
function reducer(state=0,action){
     switch(action.type){
         case 'add':
             return state+1;
             break;
         case 'decrease':
             return state-1;
             break;
         default:
             return state;
     }
}
//然后就是注册和使用了
let stroe=createStore(reducer);
//拿着这个store 在各个组件中进行使用
//获取数据 store.getState() 
//更改数据  store.dispatch({type:'add'})
//更新页面的数据　可以监听　render函数
function render(){
    ReactDOM.render(<App />, document.getElementById('root'));
}
render()
store.subscribe(render) // store中的数据发生变化 触发render函数

优化1
单独创建一个reducer文件夹 创建一个index.js把reducer放入进去
在app.js中引入使用

// reducer/index.js

```javascript
function reducer(state=0,action){
     switch(action.type){
         case 'add':
             return state+1;
             break;
         case 'decrease':
             return state-1;
             break;
         default:
             return state;
     }
}

export default reducer;
//app.js　引入使用
import reducer from “./reducer”

优化２　如果　state的初始值越来越多的话 建议整一个初始化对象存储

```javascript
// src/reducer/index.js
let initState={count:0}
function reducer(state=initState,action){
     ....逻辑处理省略
}

优化3 如果state 初始数据越来越庞大 也是建议重新 建立一个js文件

// src/reducer/initState.js
export default initState={*******}// 里面的数据用 *** 号代替了
//src/reducer/index.js
import initState from "./initState.js"

优化4：提取 操作封装成一个函数

function reducer(state=initState,action){
     switch(action.type){
         case 'add':
             return state+1;
             break;
         case 'decrease':
             return state-1;
             break;
         default:
             return state;
     }
}
// 现在操作比较简单 还可以 如果往后面越来越复杂的话 建议封装到函数里面
// src/reducer/index.js
function add(state){
  return state+1;
}
function decrease(){
  return state-1;
}
function reducer(state=initState,action){
     switch(action.type){
         case 'add':
             return add(state);
             break;
         case 'decrease':
             return decrease(state);
             break;
         default:
             return state;
     }
}

优化5 提取里面的函数到单独的文件 组成函数库
还是老样子项目越来越大 建议提取到一个专门存储操作的文件

// src/reducer/common.js
function add(state){
    return state+1;
}
function decrease(state){
    return state-1;
}
export {add,decrease};
//src/reducer/index.js
import {add,decrease} from "./common.js"
function reducer(state=initState,action){
     switch(action.type){
         case 'add':
             return add(state);
             break;
         case 'decrease':
             return decrease(state);
             break;
         default:
             return state;
     }
}

优化6：用户的操作不应该定死 而是通过传惨输入进来的
看出来上面的 case ‘add’ 或者 case ‘decrese’ 这样写死明显也不太好
我们可以封装成一个函数让他生成 一个reducer函数 里面的操作 通过传惨来确定执行那个操作

// src/reducer/createReducer.js
function createReducer(initState,json){
    return function reducer(state=initState,action){
        if(json[action.type]){
            return json[action.type](state)// 当然后面的参数就不只是state
        }else{
            return state;
        }
    }
}
export default createReducer;
// src/reducer/index.js
import createReducer from "./createReducer.js" // 创建 生成reducer函数 
import {counterInit} from "./initState"// 初始化 state
import {add,decrease} from "./common.js"  // 初始化函数库
import createReducer  from  "./createReducer"
let reducer=createReducer(stateInit,{add,decrease}) // 创建一个reducer 函数对象
export default reducer;
// src/app.js
import reducer from "./reducer"
let store =createStore(reducer);

优化7: 多人开发篇
如果是多人开发的话 每个人都有自己的 initState 如果这个时候我们在创建一个 reducer函数明显不够用的
这个时候要引入的一个新的东西 combineReducers
假设 我们现在 有俩个 童鞋 一个 a童鞋 一个 b童鞋
a童鞋的reducer 函数

// src/reducer/a.js
import createReducer from "./createReducer.js" // 创建 生成reducer函数 
import {counterInit} from "./initState"// 初始化 state
import {add,decrease} from "./common.js"  // 函数库
import createReducer  from  "./createReducer"
let a=createReducer(stateInit,{******}) // 创建一个reducer 函数对象
export default a;

b童鞋的reducer函数

// src/reducer/b.js
import createReducer from "./createReducer.js" // 创建 生成reducer函数 
import {counterInit} from "./initState"// 初始化 state
import {add,decrease} from "./common.js"  // 函数库
import createReducer  from  "./createReducer"
let b=createReducer(stateInit,{******}) // 创建一个reducer 函数对象
export default b;

// src/reducer/index.js
import {combineReducers} from "redux"
import a from "./a.js"
import b from "./b.js"
export default combineReducers({
    a,b
})

使用的时候
a童鞋的数据 store.getState().a
b童鞋的数据 store.getState().b
// 如果是俩个童鞋定义的方法名一样话 俩者不会冲突报错 会同时执行俩者的操作
好了 到这里暂时就结束了 以后有新的东西 我会继续新增的