封装小程序状态管理工具（类redux）-即速应用

一、为什么封装redux

在曾经的小程序开发中，有遇到复杂的交互逻辑，当时是按照小程序文档里的说明来处理状态的，当时感觉非常麻烦，浪费了很多代码量和时间，后来我就在想小程序有没有像vuex或react那样的状态管理工具，当然了是没有找到的，不过看到有人提供另外一种方式，就是改npm包让redux 支持小程序，改npm包对于开发者来说，需要一定的技术积累，当然不出各种幺蛾子才最重要。不然会浪费很多时间。很遗憾对于像我这样怕出问题的新手来说我是不会随便改的0.0。而且小程序是有代码量限制的，因此不想引入一个第三方包来用，那样会有点重，根据我自己的学习积累和参考一位大神对redux内部的简要分析，我有了自己的思考。

二、封装类redux状态管理工具

1、在小程序miniprogram目录下建lib目录在lib目录下建 wxx目录（小程序的状态管理包目录）

在wxx（miniprogram/lib/wxx）目录下创建 redux.js 内容如下

export default function createStore (state,reducer) {    const listeners = [];    const subscribe = (listener) => listeners.push(listener);// 观察者模式    const getState = () => state;    const dispatch = (action) => {        let oldState = state;        state = reducer(state, action);        listeners.forEach((listener) => listener() && listener(oldState))    };    return { getState, dispatch, subscribe, listeners}}

2、在miniprogram目录下创建store目录

在store（miniprogram/store）目录下创建state.js

内容如下：

export default  {    tocast: false,    title: {        text: 'this is title',        color: 'red',    },    content: {        text: 'this is content',        color: 'blue'    }};在store（miniprogram/store）目录下创建actionTypes.js

内容如下：

export const updateTittleColor= 'UPDATE_TITLE_TEXT';export const changeTocast='CHANGE_TOCASE';export const changeTittleText = 'UPDATE_TITLE_TEXT';

在store（miniprogram/store）目录下创建reducer.js

内容如下：

import * as actionTypes from './actionTypes.js'export default function  reducer(state, action = {}) {    if (JSON.stringify(action) ==="{}") {            return state;    }    switch (action.type) {        case actionTypes.changeTittleText:            var title = state.title;            return { // 构建新的对象并且返回                ...state,                title: {                    ...title,                    text: action.value                }            }        case actionTypes.updateTittleColor:            var title = state.title;            let data = {                ...state,                title: {                    ...title,                    color: action.value                }            };            return { // 构建新的对象并且返回                ...state,                title: {                    ...title,                    color: action.value                }            };        case actionTypes.changeTocast:            var tocast = state.tocast;            return { // 构建新的对象并且返回                ...state,                tocast: action.value            };        default:            return state // 没有修改，返回原来的对象    }}

在store（miniprogram/store）目录下创建actionCreator.js

内容如下：

import * as actionType from './actionTypes.js'export const change = () => {    return {        type: actionType.updateTittleColor,        value: 'yellow'    }};export const changeTocastEvent = () => {    return {        type: actionType.changeTocast,        value: true    }}export const changeText = () => {    return {        type: actionType.changeTittleText,        value: '修改成功'    }};

在store（miniprogram/store）目录下创建store.js

内容如下：

import createStore from '../lib/wxx/redux.js'import state from './state.js'import reducer from './reducer.js'const store = createStore(state, reducer);export default store;

3、在miniprogram目录下app.js(全局的js文件）添加如下代码

import store from './store/store.js'App({onLaunch(options) {    store.subscribe(() => {        this.globalData.state = store.getState();// 获取新的 state    });    this.globalData.store = store;},globalData: {    store: null,    state: {}}})

4、功能测试

在pages/index/index.js

import * as actionCreator from '../../store/actionCreator.js'const app = getApp();const store = app.globalData.store;

onLoad: function (options) {    store.dispatch(actionCreator.changeTocastEvent())    store.dispatch(actionCreator.changeText())}onReady: function () {    console.log(app.globalData.state)},

//devtool log结果

{tocast: true, title: {…}, content: {…}}
1. content:
  1. color:"blue"
  2. text:"this is content"
  3. __proto__:Object
2. title:
  1. color:"red"
  2. text:"修改成功"
  3. __proto__:Object
3. tocast:true
4. __proto__:Object