minapp-redux v2.0.2
minapp-redux - 微信小程序 redux 支持库
使用 100 行代码，你就可以拥有：
完整 redux 支持（模块化、异步数据流流、强大的生态）🔥🔥
原生 page 对象结构的 connect,类似 react-redux（较低的学习成本、便捷的移植方案）🔥🔥
最小的 diff 更新 🔥🔥
实现理念
- 为什么是 redux
redux 作为一个最好的 flux 最好的实现之一，他拥有庞大的社区支持与完善的插件支持。并且相对于 vuex 的定制化，redux 作为一个极简的状态管理系统（通过插件实现定制化），天生有易于移植、适用于任何框架的基因。事实上，本文介绍的minapp-redux也可以归属于 redux 的定制化插件之一。
- 状态如何映射到视图
小程序框架没有类似 react 的 props 语法，并且由于桥接语法的存在，使得 JS 层只有 data 数据才能 map 到 wxml。所以minapp-redux的 connect 语法会将第一参数(stateMapFunction)返回的对象并入 page 对象定义的 data 中，使用是需要注意不能有属性重名，否则会有告警：stateMap 数据会覆盖 page 对象中定义的重名 data 属性。
- 运行时
由于小程序规范，data 中的数据必须在初始化 page 对象时存在，minapp-redux提供的 connect 语法会在小程序初始化时调用，使用Page(connect(stateMapFun, methodMapFun)(pageObject))语法，pageObject 保持了你原本 page 对象的完整性，便于项目移植或移除minapp-redux。在后续 redux 状态改变的时候，redux api subscribe监听状态变化，并通过保存 store 实例使用 setData 更新到视图。
- 最小的 diff 更新
minapp-redux使用了专属于小程序的 diff 更新机制，在有属性变化的时候会比较新 store 返回的 stateMap 与 page 对象中当前 data 的属性，并且抽取出变化属性的集合（丢弃相同值的属性），保证最小粒度的更新。值得注意的一点是，有时候我们会使用特别复杂的 store 对象作为 map 属性，而对这些复杂对象的 diff 对比会带来比较大的开销，所以minapp-redux使用浅比较，当遇到 map 数据类型为 Object 时，会将整个对象直接赋值更新。
- 完整的 Redux 支持
前面说过minapp-redux只是作为一个 redux 的定制化插件存在，它没有改变任何的 redux 原有功能，任何你需要用到的无浏览器支持的 redux 插件你都可以无缝使用到你的minapp-redux项目中，例如：redux-logger、redux-thunk 等等。
- 模块化支持
redux 本身没有提供模块化方法，minapp-redux 为了带来更好的使用体验，内置了 redux 的模块化封装，提供类似 vuex 开箱即用的模块化能力。
使用
引入
- npm 构建
npm install minapp-redux --save
- 直接引入
复制项目 src 文件夹下 index.js 到项目中
API
const { use, connect, connectComponent, createModule, combineModules } = require(' minapp-redux')
/**
* use
* @param {Object} Store
*/
/**
* connect
* @param {Function} mapStateToData
* @param {Function} mapMethodToPage
* @return {Function}
*/
/**
* connectComponent
* @param {Function} mapStateToData
* @param {Function} mapMethodToPage
* @return {Function}
*/
/**
* createModule
* 创建模块 模块对象必须为一个标准对象
* {
name: 'xxx',
initialState: {
},
asyncActions: actions => ({
xxx: (payload: any) {
return (dispatch, getState) => any
}
}),
reducers: {
xxx: (state, action) {
return { ...state, ...any}
}
}
}
* 返回一个redux模块
* @param {Object} module
* @returns {Object}
*/
/**
* combineModules
* 合并 modules，module 为使用 createModule 创建
* 合并后的 modules
* @param {Object} modules
* @returns {Object}
*/如何使用？
注入 redux
// app.js
import { use } from 'minapp-redux'
// redux Store
import Store from '../../store/index'
//inject Store
use(Store)
App({
onLaunch() {},
})page 连接
// pages/login/index.js
import { connect } from '../../libs/minapp-redux'
import * as Actions from '../../store/userInfo/actions.js'
const stateMap = (state) => {
const { userInfo } = state
return {
hasLogin: userInfo.hasLogin,
userName: userInfo.userName,
}
}
const methodMap = (dispatch, state) => ({
login(userName) {
dispatch(
Actions.login({
hasLogin: true,
userName,
})
)
},
})
const page = {
data: {
username: '',
},
bindUserNameChange(e) {
this.setData({
username: e.detail.value,
})
},
bindLogin() {
if (!this.data.username) return
this.login(this.data.username)
wx.navigateBack({
delta: 1,
})
},
}
Page(connect(stateMap, methodMap)(page))模块化方法
// store/modules/user.js
import { createModule } from '../../libs/minapp-redux'
export default createModule({
name: 'user',
initialState: {
userInfo: {}
},
actions: {
setUserInfo: v => v
},
asyncActions: actions => ({
getUserInfo(userName) {
return function(dispatch, getState) {
return Promise.resolve({ userName, id: 1 }).then(
res => {
dispatch(actions.setUserInfo(res))
return res
},
err => Promise.reject(err)
)
}
}
}),
reducers: {
setUserInfo(state, action) {
return { ...state, userInfo: action.payload }
}
}
})
// store/index.js
import { createStore, combineReducers, applyMiddleware } from '../libs/redux'
import thunk from '../libs/redux-thunk.js'
import logger from '../libs/redux-logger'
import { combineModules } from '../libs/minapp-redux'
import user from './user'
let modules = combineModules({
user
})
let middleware = [thunk, logger]
const Store = createStore(
combineReducers(modules.reducers),
applyMiddleware(...middleware)
)
export const actions = modules.actions
export default Store更具体使用可查看demo