在微信小程序中使用redux

本文主要讲述,在微信小程序中如何使用redux

DEMO

需要解决的问题

  1. 如何在小程序中引入redux状态管理库,及它相关的插件?
  2. 微信小程序没有清晰的异步api,便于thunkMiddleware处理异步请求(异步操作),如何解决?
  3. 如何正确使用store的三大核心方法(getStore dispatch subscribe)?

redux并不是react专属,所以他可以在任何地方使用,小程序也不例外。解决上面三个问题就可以了。

问题一: 如何在小程序中引入redux状态管理库,及它相关的插件?

  1. 使用npm在临时目录里安装redux和其他你需要用到的包,如:logger thunkMiddleware。这里以redux示例。
  2. 进入node_module中,拷贝如下文件:\redux\dist\redux.js或者\redux\dist\redux.min.js
  3. 根据1/2中的步骤。把redux.js logger.js thunkMiddleware都拷贝到小程序项目文件夹\module目录下,没有请新建。

问题二: 微信小程序没有清晰的异步api,便于thunkMiddleware处理异步请求(异步操作),如何解决?

前面有文章已经写过,如何将微信异步api转换为Promise,便于异步编程:把微信小程序异步API转为Promise,简化异步编程

读完会,把to-promise库和redux一样放在\module文件夹下

问题三:如何正确使用store的三大方法(getStore dispatch subscribe)?

这也是最关键的

app.js中创建store

//app.js
import reducer from ‘./reducer/index‘
import { createStore, applyMiddleware } from ‘./module/redux‘
import logger from ‘./module/redux-logger‘
import thunkMiddleware from ‘./module/redux-thunk‘

//创建redux store
export const store = createStore(
  reducer,
  applyMiddleware(
    logger,//用于控制台state调试
    thunkMiddleware//用于处理异步action
  )
)

App({
    //...
})

编写action

// 项目根目录/action/http3Steps.js

export const REQUSET_BEGIN = ‘REQUEST_BEGIN‘
export const RECEIVED = ‘RECEIVED‘
export const REQUEST_FAILED = ‘REQUEST_FAILED‘

//创建三个请求http事务时的状态action,用于处理通用http请求
//1 请求开始;2 收到请求;3 请求失败
export const requestBegin = (requestName) => ({
  type: REQUSET_BEGIN + requestName
})

export const received = (requestName, res) => ({
  type: RECEIVED + requestName,
  res
})

export const requestFailed = (requestName, err) => ({
  type: REQUEST_FAILED + requestName,
  err
})

编写索引action:

// 项目根目录/action/index.js

import { requestBegin, received, requestFailed } from ‘./http3Steps‘
import toPromise from ‘../module/to-promise‘

//微信小程序没有提供Promise版本的异步api
//我封装了一个库,把微信小程序异步api转化为Promise,用于处理redux中的异步action
//项目地址:https://github.com/tornoda/to-promise
//使用方法见blog:https://www.cnblogs.com/looyulong/p/9471424.html
const toPromiseWx = toPromise(wx)
const request = toPromiseWx(‘request‘)

//这是一个同步的action
export const INCREASE = ‘INCREASE‘

export const increase = {
  type: INCREASE
}

//这是一个异步action
//网络请求action
//根据redux官网的介绍,它应该是一个Promise,但是微信小程序没有提供Promise版本的异步api,需要使用上面提到的工具库
export const GAME_LIST = ‘_GAME_LIST‘

export const fetch = (requestName, option) => {
  return (dispatch) => {
    dispatch(requestBegin(requestName))//请求开始,更新state状态
    return request(option)
      .then(
        (res) => { dispatch(received(requestName, res)); return res },//请求成功,把返回的信息在state中更新
        (err) => { dispatch(requestFailed(requestName, err)) }//请求失败,把失败的信息在state中更新
      )
  }
}

编写处理action的reducer

// 项目根目录/reducer/index.js

import { INCREASE } from ‘../actions/index‘
import { GAME_LIST } from ‘../actions/index‘
import { REQUSET_BEGIN, RECEIVED, REQUEST_END } from ‘../actions/http3Steps‘
import { combineReducers } from "../module/redux";

//这是处理本例子中同步action的reducer
export const disposeIncrease = (state = 0, action) => {
  switch (action.type) {
    case INCREASE:
      console.log(‘redux is worked‘)
      return state + 1
    default:
      return state
  }
}

//这是处理本例中异步的reducer
const preState = {}

export const disposeFetch = (state = preState, action) => {
  switch (action.type) {
    case REQUSET_BEGIN + GAME_LIST:
      return {
        ...state,
        status: ‘REQUEST_BEGIN‘,
      }
    case RECEIVED + GAME_LIST:
      return {
        ...state,
        status: ‘RECEIVED‘,
        res: action.res
      }
    case REQUEST_END + GAME_LIST:
      return {
        ...state,
        status: ‘REQUEST_END‘,
        err: action.err
      }
    default:
      return state
  }
}

//按照state的结构组合起来
export default combineReducers({
  theIncreasingNo: disposeIncrease,
  asyncData: disposeFetch
})

让state变化时自动更新ui视图

方法很简单,在pageindex.js中的onLoad函数里面调用store.subscribe()方法监听局部data.

  onLoad: function () {
    const _this = this
    //在onLoad函数中订阅state的更新
    //如果state变化,对应ui就会更新
    subscribe(() => {
      const { asyncData: { status }, theIncreasingNo } = getState()
      _this.setData({
        syncData: `
          请求状态:${status},
          返回的数据请查看控制台
        `,
        number: theIncreasingNo
      })
    })
  }

触发动作,发出action,改变state

//index.js
import { store } from ‘../../app‘
import { increase, fetch, GAME_LIST } from ‘../../actions/index‘

const { dispatch, subscribe, getState } = store

Page({
  data: {
    syncData: ‘Hello World‘,
    number: ‘0‘,
  },
  onLoad: function () {
    const _this = this
    //发出一个异步action
    dispatch(fetch(GAME_LIST, {
      url: ‘http://open.douyucdn.cn/api/RoomApi/game‘
    })).then((data) => { console.log(data) })
    //在onLoad函数中订阅state的更新
    //如果state变化,对应ui就会更新
    subscribe(() => {
      const { asyncData: { status }, theIncreasingNo } = getState()
      _this.setData({
        syncData: `
          请求状态:${status},
          返回的数据请查看控制台
        `,
        number: theIncreasingNo
      })
    })
  },
  testSyncAction: function () {
    //发出一个同步action
    dispatch(increase)
  }
})

如下图:

源文件

DEMO地址

实战项目

稍后上传,敬请期待。

原文地址:https://www.cnblogs.com/looyulong/p/9709943.html

时间: 2024-11-05 17:23:06

在微信小程序中使用redux的相关文章

微信小程序中target与currentTarget

如有错误,请纠出,大家一起进步!!! target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象.在微信小程序中也可总结为:target指向发生事件的组件,currentTarget指向绑定事件的组件. 下面请看例子: text.wxml: <view class="view1&

微信小程序中的 hover-class

微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button.navigator. 不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation.hover-start-time.hover-stay-time 这三个属性. 使用方法: <view hover-class="bg_red">这是

微信小程序中的单位

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规

微信小程序中获取高度及设备的方法

由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度 wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 wx.getSystemInfoSync().model // 获取当前采用的设备 wx.getSystemInfoSync().pixelRatio wx.get

微信小程序中的循环遍历问题

比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环 for(var i=0;i<10;i++){ console.log(i); } 确实结果也是这样: 但是,如果我在循环时同时调用wx的api接口10次,那么输出的结果就会不同(这是产生了闭关的效应) eg:每次调用一次wx.showToast()接口,并在成功时输出循环的值. for(var i=0;i<10;i++){ wx.showToast({ title: 'haha', success:function(){

微信小程序中使用ECharts 异步加载数据 实现图表

<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas

在微信小程序中使用LeanCloud(一)

之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数据库(开发版免费).适用于一些想自己写微信小程序前端但不太会后端的开发者学习用.本篇文章涉及数据存储服务(增删查改). 首先,下载一个JavaScript-sdk :av-weapp-min.js[下载链接],它是在微信小程序中使用此数据库的关键文件.下载之后,保存至项目路径,这里以'/libs/a

微信小程序中转义字符的处理

在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:'<'.'>'.'&'.'空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理. 1.官方API调用这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明: 从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调用

去除富文本中的html标签及vue、react、微信小程序中的过滤器

在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及?空格 let richText = ' <p style="font-size: 25px;color: white">&nbsp; &nbsp; &nbsp; &nbsp;sdaflsjf的丰富及饿哦塞尔</p><s