Wepy使用记录—Wepy-Redux基本使用
wepy-redux刚开始看的时候真是不知道是啥一头雾水。网上找的资料大部分鬼话连篇。要说良心之作不是没有，请看这篇手把手教你在小程序里使用 Redux。这篇讲的是非常不错的，结合wepy示例代码讲的。由于我个人理解比较慢，所以我不得不看了点视频再了解一下。
- React16.4 快速上手（怕直接看下面的不懂，提前积累了点基础）
- 在React中使用Redux数据流（看概念即可，看多了一样懵逼）
- wepy-redux使用说明（使用上还是得参考官方示例）
配置准备工作
这里参考的官方示例，进行配置。首先是添加依赖，在项目的根目录中，使用命令行安装依赖，安装以下四项。
- npm install wepy-redux --save
- npm install redux --save
- npm install redux-actions --save
- npm install redux-promise --save
接下来修改下wepy.config.js文件，这里直接将官方示例的插件配置赋值到我们的项目中，用途我没深入研究过。重点毕竟不在这些配置上而在于使用，具体的还是交给那些大神吧。
这块的配置直接复制下面的代码就可以了。他比我们项目的默认配置只多不少，请放心粘贴复制。
plugins: [
'babel-plugin-transform-class-properties',
'transform-export-extensions',
'transform-class-properties',
'transform-decorators-legacy',
'transform-object-rest-spread',
'syntax-export-extensions'
]
接下来继续搞赋值粘贴，将官方示例里的store文件夹整体复制到我们的项目中。没错就是这么的无耻，全程复制粘贴。
这里只要将它想象成固定写法就行了，要不没办法往下进行。接下来在app.wpy中配置store就不用再复制粘贴了，也就是配置阶段已经完成了。
这地方手敲就没有意义了，不带有成就感的，复制就得了。
import { setStore } from 'wepy-redux'
import configStore from './store'
const store = configStore();
setStore(store);
wepy.$store = store;
制定练习目标
首先定义一个界面，要不没图说个毛线。界面效果如下：
界面代码如下，组件库还是用的vant：
<style lang="stylus">
.redText
color red
</style>
<template>
<van-cell-group>
<van-cell title="数量">
<van-stepper max="10" min="1" step="1" value="1" name="extra"/>
</van-cell>
<van-cell title="金额">
<text name="extra" class="redText">0元</text>
</van-cell>
</van-cell-group>
</template>
<script>
import wepy from 'wepy'
export default class Index extends wepy.page {
config = {
usingComponents:{
'van-cell': '../components/vant/cell/index',
'van-cell-group': '../components/vant/cell-group/index',
'van-stepper': '../components/vant/stepper/index',
}
};
}
</script>
在这个页要实现的功能就是当点击加减按钮的时候，金额也随着变化。
配置type
配置状态唯一标识。作为修改状态方法的唯一标识。这里定义了两个常量，一个是用来初始化，一个是用来改变金额和数量状态的。
types/test.js中的代码如下：
export const INIT = 'INIT';//用于初始化
export const PRICE = 'PRICE';//价格
配置action
当数量发生改变时使用action来触发状态的改变。初始化就不使用action了。
actions/test.js中的代码如下：
import {createAction} from 'redux-actions'
import {PRICE} from "../types";
export const stepListener = createAction(PRICE, (e) => {
const count = e.detail;//步进器的值，也就是数量
const price = 50 * count;//假设每个都是50元
return {
count: count,
price: price
}
});
配置reducer
最后的状态改变都是在这里完成的。type和action最后都是通过触发reducer中的函数来修改状态的。
reducers/test.js中的代码如下：
import {handleActions} from 'redux-actions'
import {INIT, PRICE} from '../types/test'
const defaultState = {
count: 1,
price: 50
};
export default handleActions({
[INIT](state) {//初始化
return {...state, ...defaultState}
},
[PRICE](state, action) {//修改数量和价格
return {...state, ...action.payload}
},
}, defaultState);
验证结果
修改index.wpy文件，也就是练习界面。修改后的代码如下：
<style lang="stylus">
.redText
color red
</style>
<template>
<van-cell-group>
<van-cell title="数量">
<van-stepper max="10" min="1" step="1" value="{{count}}" @change="stepListener" name="extra"/>
</van-cell>
<van-cell title="金额">
<text name="extra" class="redText">{{price}}元</text>
</van-cell>
</van-cell-group>
</template>
<script>
import wepy from 'wepy'
import {INIT} from "../store/types";
import { connect } from 'wepy-redux';
import {stepListener} from "../store/actions";
@connect(
{//获取状态
count(state){
return state.test.count;
},
price(state){
return state.test.price;
}
},{//触发action修改状态
stepListener
}
)
export default class Index extends wepy.page {
config = {
usingComponents:{
'van-cell': '../components/vant/cell/index',
'van-cell-group': '../components/vant/cell-group/index',
'van-stepper': '../components/vant/stepper/index',
}
};
onLoad(){
wepy.$store.dispatch({type:INIT});//初始化状态
}
}
</script>
最后运行效果如下：
