【微信小程序】---- weapp-redux的使用文档
【微信小程序】---- weapp-redux的使用文档
Rattenking
发布于 2022-01-06 20:14:56
发布于 2022-01-06 20:14:56
weapp-redux 下载
预览
在这里插入图片描述
weapp-redux 使用
1. 引入 weapp-redux 插件
- 克隆 weapp-redux-demo 代码库
git clone https://gitee.com/Rattenking/weapp-redux-demo.git- 将项目文件夹下的 weapp-redux 拷贝到自己项目
2. 创建全局的 store
- 在 weapp-redux 同级创建 store 文件夹
- 在 store 文件夹下分别创建 actions, constants, reducers 文件夹
constants 目录，用来放置所有的 action type 常量 actions 目录，用来放置所有的 actions reducers 目录，用来放置所有的 reducers
- 同时创建 index.js 文件为 store 的入口文件
- 分别在 actions, constants, reducers 文件夹下创建 index.js 文件，作为操作的入口文件
3. 创建 store 入口
store/index.js
---
import { createStore, applyMiddleware } from '../weapp-redux/index'
import reducer from './reducers/index';
const store = createStore(reducer)
export default store;4. 在项目入口文件 app.js 中使用 weapp-redux 中提供的 Provider 组件将创建好的 store 接入应用中
app.js
---
import store from './store/index'
import action from './store/actions/index'
import Provider from './weapp-redux/provider/index'
let { Page, Component } = Provider(store, action)5. 开发一个简单的加、减计数器功能
- 新增 action type
constants/actionTypes.js
---
// 数字操作命令
// 加
export const ADD = 'ADD';
// 减
export const MINUS = 'MINUS';- 新增 reducer 处理
reducers/numHandle.js
---
import {
ADD,
MINUS
} from '../constants/actionTypes'
const defaultState = {
count: 0
}
export const numHandle = (state = defaultState, action) => {
switch (action.type) {
case ADD:
return { ...state, count: state.count + 1 };
case MINUS:
return { ...state, count: state.count - 1 };
default:
return state;
}
}reducers/index.js
---
import { combineReducers } from '../../weapp-redux/index';
import { numHandle } from './numHandle';
export default combineReducers({
numHandle
})- 新增 action 处理
actions/numHandle.js
---
import store from '../index'
import {
ADD,
MINUS
} from '../constants/actionTypes';
export function add(){
store.dispatch({
type: ADD
})
}
export function minus(){
store.dispatch({
type: MINUS
})
}
export function asyncAdd(){
setTimeout(() => {
add()
}, 2000)
}actions/index.js
---
import * as numHandle from './numHandle';
export default {
numHandle
}6. 计数器页面应用
- 直接访问 this.$action 操作 count
pages/index/index.js
---
Page({
storeTypes: ['numHandle'],
data: {},
add(){
this.$action.numHandle.add();
},
minus(){
this.$action.numHandle.minus();
},
asyncAdd(){
this.$action.numHandle.asyncAdd();
}
})pages/index/index.wxml
---
<view class="container">
<view>Hello, World!</view>
<view>{{numHandle.count}}</view>
<button catchtap="add">+</button>
<button catchtap="minus">-</button>
<button catchtap="asyncAdd">asyncAdd</button>
<navigator url="../logs/logs">import 引入操作页</navigator>
<navigator url="../actionType/index">actionTypes 引入操作页</navigator>
</view>- import 引入计数器操作方法
pages/logs/logs.js
---
import {
add,
minus,
asyncAdd
} from '../../store/actions/numHandle';
Page({
storeTypes: ['numHandle'],
add,
minus,
asyncAdd
})- actionTypes 引入计数器操作方法
pages/actionType/index.js
---
Page({
storeTypes: ['numHandle'],
actionTypes: ['numHandle']
})7. 总结
- 第一种方法需要重新在对应页面创建对应的操作方法；
- 第二种需要import引入对应的方法；
- 第三种是将actions对应暴露的方法全部导入；
- 请按照实际情况使用
8. 目前消耗性能需要优化
- dispatch 的时候会将所有的订阅都执行一次，期望仅执行和更新相关的订阅；
- 订阅的时候是将需要的全局状态一起 setData，期望仅更新发生变化的部分进行更新！
9. 下载
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-11-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录