微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用

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文件,这里直接将官方示例的插件配置赋值到我们的项目中,用途我没深入研究过。重点毕竟不在这些配置上而在于使用,具体的还是交给那些大神吧。
微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用_第1张图片
  这块的配置直接复制下面的代码就可以了。他比我们项目的默认配置只多不少,请放心粘贴复制。

      plugins: [
        'babel-plugin-transform-class-properties',
        'transform-export-extensions',
        'transform-class-properties',
        'transform-decorators-legacy',
        'transform-object-rest-spread',
        'syntax-export-extensions'
      ]

  接下来继续搞赋值粘贴,将官方示例里的store文件夹整体复制到我们的项目中。没错就是这么的无耻,全程复制粘贴。
微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用_第2张图片
  这里只要将它想象成固定写法就行了,要不没办法往下进行。接下来在app.wpy中配置store就不用再复制粘贴了,也就是配置阶段已经完成了。
微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用_第3张图片  这地方手敲就没有意义了,不带有成就感的,复制就得了。

  import { setStore } from 'wepy-redux'
  import configStore from './store'
  const store = configStore();
  setStore(store);
  wepy.$store = store;

制定练习目标

  首先定义一个界面,要不没图说个毛线。界面效果如下:
微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用_第4张图片
  界面代码如下,组件库还是用的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

  配置状态唯一标识。作为修改状态方法的唯一标识。这里定义了两个常量,一个是用来初始化,一个是用来改变金额和数量状态的。
微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用_第5张图片
  types/test.js中的代码如下:

export const INIT = 'INIT';//用于初始化
export const PRICE = 'PRICE';//价格

配置action

  当数量发生改变时使用action来触发状态的改变。初始化就不使用action了。
微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用_第6张图片
  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中的函数来修改状态的。
微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用_第7张图片
  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>

  最后运行效果如下:
微信小程序笔记(五)Wepy使用记录—Wepy-Redux基本使用_第8张图片

你可能感兴趣的:(前端练习)