Wepy使用Redux

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来触发状态的方法