封装小程序状态管理工具（类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结果

1. {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

数据已经发生变更，完美

核心在 miniprogram/lib/wxx/redux.js 和在miniprogram目录下app.js(全局的js文件）可以根据代码进行分析，这里不再赘述。

个人思考：针对小程序的状态，这个状态管理工具是足够用的