前置知识点
- 深拷贝与浅拷贝
- FLUX架构
数据库模型
无论是MVC,MVVM,还是现如今的Flux,最强调的一点就是模块化的分离解耦.
因为整套系统是围绕数据运作的,所以
- 表现是基于数据而来: 数据库的内容决定了展示的页面
- 功能是基于数据而实现: 功能是在数据之上做修改
最终的结果就是,:
- 数据(store)决定了展示(view)
- 指令(action)改变了数据(store)
- 展示(view)绑定了指令(action)
而具体是选择mvc, mvvm, 还是flux完全是基于那一部分东西多而决定的, 核心的理念都是相同的.
优先数据
界面归根结底是为了展现数据, 所以优先设计好数据模型. 再设计对这些数据模型所能实现的功能. 最后将这些功能附加到界面上.
Redux初体验
第一步总是做需求分析, 还是先做个todo
需求分析
- 界面可以展现一个todolist
- 有个按钮可以增加todolist的内容, 增加的todo默认是未完成
- 每条todo后面会有一个按钮可以删除该条todo
- 每条todo后面会有一个按钮可以完成该条todo
- todolist下面有三个按钮, 分别可以展示所有todolist, 展示完成的todolist, 展示未完成的todolist
数据模型(store)设计
- 数据是一个简单对象
- 数据模型就是一个精简版的数据库
- 数组总是很好的选择
{
displayMode: // mode类型在我们公司的产品里一般是存放在域表里, 由ID指定.
todoList: [
{
text: // todo的内容
status: // 状态, 如果需要的话可以把status放域表, 或者直接赋值true / false
]
}
动作指令(action)设计
- 动作指令就是对数据模型操作的一串指令
- 动作指令是一个对象
- 这个对象必须包含type属性
{type:'ADD_TODO',payload:'Eating'}
{type:'DEL_TODO',payload:1}
{type:'TOGGLE',payload:2}
{type:'CHANGE_DISPLAY_MODE',payload:1}
其实就像是一堆机器伪代码
方法服务(reducer)设计
- 后端的常见思路就是将对数据库操作的SQL写成一个个数据库服务.
- Redux里就是写reducer
- reducer就是一个函数,接受两个参数,一个是state,一个是action
- status就是当前的数据模型的一部分,比如如果我们动作是操作数据模型中的displayMode部分,那么我们就设计一个displayModeReducer,接受当前的displayMode的值,再接受一个action作为执行参数.
- action就是指令参数,传入的就是action
- 一个reducer只返回state的一部分,比如你对displayMode做调整,就只返回displayMode的值就行了,如果你对todoList做调整,那么就返回一个todoList的数组就好了.
const displayModeReducer = function(state=0,action){
//执行动作
return state
}
const todoListReducer = function(state=0,action){
//执行动作
return state
}
合并服务(combineReducers)
- 其实上边的动作都是纯原生js写的. 到这步才真正是Redux的API部分
- 合并服务的目的是将所有Reducer合并进一个Reducers池中, 因为每个reducer只返回state的一部分, 所以将所有reducer拼起来必然是一个完整的state
- 整合reducer的顺序按照store的结构顺序来就好了
import { combineReducers } from 'Redux';
const reducers = combineReducers({
displayMode: displayModeReducer
todoList: todoListReducer
}
)
生成数据模型(store)
- 这步也是Redux的API
- createStore需要两个蚕食,一个是合并后的服务,一个是初始的state
- 生成的store带有getState()方法可以获取当前state
- subscribe()方法可以监听传来的指令,然后执行回调
- dispatch()方法可以对store执行指令
import { createStore } from 'Redux'
const store = createStore(reducers,{})
此时其实可以进行简单测试了
store.subscriber(()=>{console.log('Listen to State Change) , store.getState()})
//这样如果store监听到了指令的话,就会执行回调,返回store.getState().
//可以尝试发一串指令过去看看会得到什么,比如
store.dispatch({type: "CHANGE_DISPLAY_MODE", payload: 1})
store.dispatch({type: "CHANGE_DISPLAY_MODE", payload: 2})
store.dispatch({type: "CHANGE_DISPLAY_MODE", payload: 3})
store.dispatch({type: "ADD_TODO", payload: "HAPPY"})
store.dispatch({type: "ADD_TODO", payload: "EATING"})
store.dispatch({type: "ADD_TODO", payload: "WASHING"})
store.dispatch({type: "DEL_TODO", payload: 1})
store.dispatch({type: "TOGGLE", payload: 1})
//反正什么也得不到啦只会得到undefine,因为reducer没有正常返回,只返回了一堆空state
//这样的话就可以继续去完善reducer了
完善reducer
- reducer的作用就是在收到指令action后,会重新返回一个新的state, 因为state的变化,那么界面也会相应变化.
- 在reducer内主要不要对原始state进行突变(mutant), state部分是引用类型的值, 突变就会导致执行指令前后的state指向的实际对象被改变为相同的值, 这样会产生很多不好的影响比如无法做日志.
- 现阶段好用的创建一个新的对象的方法, 可以用ES6的Object.assign方法, 结合ES6的展开运算符. 或者用一些其他库比如lodash或者jquery甚至immutable.js
- 这部分建议多研究些方法, 看看lodash源码或者jq源码, ES6现在已经有许多很好用的原生对象API了, 数组更是能玩出花. 就不赘述了.
import { combineReducers } from 'redux'
const displayModeReducer = function (state = 0, action) {
switch (action.type) {
case "CHANGE_DISPLAY_MODE": {
return action.payload;
}
default: {
return state;
}
}
}
>
const todoListReducer = function (state = [], action) {
switch (action.type) {
case "ADD_TODO": {
return [...state, {text: action.payload, status: false}];
}
case "DEL_TODO": {
return [...state.slice(0, action.payload), ...state.slice(action.payload + 1)]
}
case "TOGGLE": {
return [...state.slice(0, action.payload),
Object.assign({}, state[action.payload], {status: !state[action.payload][state]}),
...state.slice(action.payload + 1)]
}
default: {
return state;
}
}
}
用函数创建action
刚才可以看到所有action都是手动打的, 比较麻烦, 可以考虑把生成指令组合成一些方法, 自动生成action对象.
const addTodo = (text) => ({
type:"ADD_TODO",
payload:text
})
>
const delTodo = (index) => ({
type:"DEL_TODO",
payload:index
})
>
const changeDisplayMode = (modeId) => ({
type:"CHANGE_DISPLAY_MODE",
payload:modeId
})
>
const toggle = (index) => ({
type:"TOGGLE",
payload:index
})
小结
到这一步, Redux的数据处理逻辑部分都已经完全实现了, 总共就用了量个API, createStore用来创建store, combineReducers用来合并所有的reducer. 可以说是相当简练了.
- 设计数据模型, 确定好state的结构
- 解剖state, 将每一段state的属性做成reducer, 每个reducer里加入处理逻辑
- 用combineReducers将所有reducer合并成一个reducer
- 用createStore将reducer制作成store
- 设计指令模型, 将指令对象用函数生成
- 此时就可以用store.subscribe()来监听指令了, 用store.dispatch()来发送指令.
