Wepy之Redux

学海无涯苦作舟

刚接手小程序第三周...接了一个用状态管理的项目
由于之前有看到大佬写了一篇干货就转载过来了
如今自己要用了抽个空自己研究一下

以下内容只是自己对redux的了解如有错误希望大神回帖指点

首先接手的项目因为全局变量很多所以用this.$parent.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
    <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来触发状态的方法

至此教程中的方法都走了一遍...希望再接手项目后能上手快速一点