Wepy之Redux
首先接手的项目因为全局变量很多 所以用this.$parents.globalData.变量的方法会比较混乱(当然 你也可以全都用全局变量)
状态管理前期的配置会相对繁琐.. 并且没有全局变量开阔.. 你可能为了一个变量需要写更多的代码 但是对于日后的程序管理 还是很方便的
目前看了下项目的代码 基本都是用来存储变量 应该还会有高阶语法 这里不展开了 ..因为我也不会...这里是对教程的总结 便于自己理解
store---types
types里存储的是触发action的函数名 记住 types的都是函数名 不处理任何逻辑 命名规则是全大写
//location.js
export const CHANGE = 'CHANGE'
export const CHANGECITY = 'CHANGECITY'
↑↑↑这样就定义好了一个函数名 通过types里的index.js 入口文件 导出
//types下的index.js
export * from './location'
store---reducers
//入口文件 把reducers下的所有函数引入 并且通过combineReducers函数导出
import { combineReducers } from 'redux'
import location from './location'
export default combineReducers({
location
})
接下来让我们看看location.js里是什么样的
import { handleActions } from 'redux-actions'
//这里把types里的函数名引入 注意相对路径
import { CHANGE, CHANGECITY } from '../types/location'
//通过handleActions函数导出
//这里函数接收2个函数 第一个函数为触发方法修改状态,第二个函数为状态里的默认值
export default handleActions({
[CHANGE](state, action) {
return {
...state,
postLocation: action.payload.postLocation
}
},
[CHANGECITY](state, action) {
return {
...state,
cityName: action.payload.cityName
}
}
}, {
postLocation: '',
cityName: ''
})
//当然也可以按照教程里这样写 应该可读性更高
import { handleActions } from 'redux-actions'
import { CHANGE, CHANGECITY } from '../types/location'
const defaultState = {
postLocation: '',
cityName: ''
}
export default handleActions({
[CHANGE](state, action) {
return {
...state,
postLocation: action.payload.postLocation
}
},
[CHANGECITY](state, action) {
return {
...state,
cityName: action.payload.cityName
}
}
}, defaultState)
其余的就不展开说了 自己也没搞
之后让我们看看在page里该如何使用把
import wepy from 'wepy'
import { connect } from 'wepy-redux' //引入redux
//这里我是把connct当作连接状态管理的中间件
@connect({
postLocation(state) {
return state.location.postLocation
}
})
//之后就可以当作自己的变量用this.postLocation来取到值了
这是获取状态的值 那发起action修改值呢 connect接收2个对象 在第二个对象提取reducers
//之前的引入不变 这里只关注@connect如何使用
//首先需要引入types里的方法名
import {CHANGE, CHANGECITY } from '../store/types/location'
//在第二个对象里引入方法名 (key value 一样可以简写)
@connect({}, {
CHANGE,
CHANGECITY
})
//自己本身的方法是通过this.CHANGE()调用
//这里有点不同 通过?
this.methods.CHANGE({
postLocation:你要存储的值
})
至此 状态管理的全局变量就到此结束
之后研究一下另外一个例子在补充
中场休息结束啦
继续看看状态的其他用法
//reducers下的list.js
import { handleActions } from 'redux-actions'
import { ADD , REMOVE } from '../types/list'
//这里定义了一个数组 我们也可以把他看成一个循环的列表 key-value自定义
const defaultState = [
{
title : '吃饭' ,
text : '今天我要吃火锅'
},
{
title : '工作' ,
text : '今天我要学习Redux'
}
]
//这里的state 应该指的是上面这个对象
export default handleActions({
//添加一条的方法
[ADD]( state , action ){
state.push(action.payload)
return [...state]
},
//删除一条的方法
[REMOVE]( state , action ){
state.splice( action.payload , 1 );
return [ ...state ]
}
},defaultState)
我们看看page里如何使用这两个方法
//某个不知名的page
{{ item.title }}
{{ item.text }}