types
types里存储的是触发action的函数名 记住 types的都是函数名 不处理任何逻辑 命名规则是全大写
//location.js
export const CHANGE = 'CHANGE'
export const CHANGECITY = 'CHANGECITY'
↑↑↑这样就定义好了一个函数名 通过types里的index.js 入口文件 导出
//types下的index.js
export * from './location'
reducers
入口文件 把reducers下的所有函数引入 并且通过combineReducers函数导出
import { combineReducers } from 'redux'
import reduxCombi from './reduxCombi'
export default combineReducers({
reduxCombi
})
接下来让我们看看reduxCombi.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
<template lang="wxml">
<view class="container">
<button @tap="addList">添加</button>
<view class="box">
<view class="item" wx:for-items="{{ todoList }}" wx:key="index">
<view class="title">{{ item.title }}</view>
<view class="content">{{ item.text }}</view>
<button type="primary" class="delete" @tap="delete({{index}})">删除</button>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import { connect } from 'wepy-redux'
export default class Index extends wepy.page {
components = {}
computed = {
todoList(){
return wepy.$store.getState().list;
}
}
methods = {
delete(index){
wepy.$store.dispatch({ type : 'REMOVE' , payload : index })
},
addList(){
wepy.$store.dispatch({ type : 'ADD' , payload : {
title : '学习' ,
text : '好好学习'
}})
}
}
onLoad () {
console.log(wepy.$store.getState())
}
}
//这里很奇怪的是方法居然没有引入 , 直接通过另外一种姿势获取到了方法 ,不确定这种方法是否可靠...
//在计算属性里 添加一个属性 todoList 值为状态里的reducers里的list.js 里面的数据本身就是个数通过
// wepy.$store.getState().list获取到了状态里的值
//并且通过wepy.$store.dispatch({type:'',payload:''})的方法来触发了状态里的函数
// type应该是定义的函数名 payload为需要传修改的值..由于在方法里传来的值只作为处理的参数 所以原数据并不是赋值了(看来还是要自己会写方法来处理我们存储的状态)
//当然 插入一条的数据上例子中是写死的一个对象.我们也可以通过其他姿势去插入我们想要的数据
//如果行得通 由此可见 我们可以快速的通过 wepy.$store来连接状态 弃用@connect连接器
注意
注意要在app.wpy 里加上 wepy.$store = store 才可使用下面的方式
通过wepy.$store.getState() 获取状态值
通过wepy.$store.dispatch来触发状态的方法