用rxjs实现小程序状态管理

更多内容,请收藏我的博客: http://blog.tianzhen.tech

前言

用vue和react做开发,我们经常选择vuex,redux一类的状态管理工具来辅助管理状态,状态逻辑复杂的微信小程序,如果有状态管理工具的话,可以极大地提高开发效率和可维护性。

想象这样一个场景,一个用户修改了用户名,小程序中有十多个组件都用到了这个“用户名”这个状态,如果需要把这些显示都更新,用原生的方式来实现是很麻烦的,本文介绍一种方法,基于rxjs来管理小程序中的各种状态。

rxjs学习资料:

引入rxjs

我们尽量避免多余的构建工具,直接使用umd版本的rxjs,下载地址:https://unpkg.com/rxjs/bundles/rxjs.umd.min.js,下载好后,把它放在lib目录中。

实现思路

新建一个stores目录,把状态相关的文件都放在里面,在stores下新建一个user.js,用来管理用户的状态。

新建services目录,存放api相关的服务,在services中新建user.js,用来存放请求用户数据的函数。

demo:

// services/user.js
export const userSvc = {
  getUserInfo: () => {
    console.log('执行获取用户信息');
    return 'xiaoming'; // 第一次请求返回的值
  }
};

// stores/user.js
import * as Rx from '../lib/rxjs.umd.min';
import { userSvc } from '../services/user';

const types = {
  UPDATE_USER_INFO: 'UPDATE_USER_INFO'
};

const states = {
  // BehaviorSubject把数据流中的最新值推送给订阅者
  user$$: new Rx.BehaviorSubject(userSvc.getUserInfo())
};

const actions = {
  [types.UPDATE_USER_INFO] () {
    return 'laoming';
  }
};

function dispatch(action, args) {
  switch (action) {
    case types.UPDATE_USER_INFO:
      var newStates = actions[types.UPDATE_USER_INFO]();
      states.user$$.next(newStates);
      break;
  }
}

export { types, states, actions, dispatch };

实现的思路是这样的:

首先创建一个status,用来保存用户的状态,用户状态是一个subject,这样就可以向各个组件中的订阅发送组播

然后写一系列的action,action的名称表示要执行的动作,在action函数中完成一些异步操作,比如重新获取用户信息,我们之后会把它的返回值广播给所有的订阅。

最后是dispatch函数,它描述了如何修改状态值,dispatch根据传入的action名称,执行不同的action和逻辑,最终用subject.next()方法把数据广播给每个订阅。

有了这组代码,我们只需要在使用数据的地方订阅就可以了:

// 在某个page中
import { states as userStates } from '../../stores/user';
Page({
  data: {
    name: '',
  },
  onLoad: function () {
    // 订阅测试,此时,name的值应该为'xiaoming'
    userStates.user$$.subscribe(data => {
      console.log(data);
      this.setData({
        name: data
      });
    });
  }
});

// 在page的某个组件中
import { states as userStates, types as userTypes, dispatch as userDispatch } from '../../stores/user';
Component({
  data: {
    name: ''
  },

  attached() {
    userStates.user$$.subscribe(data => {
      console.log(data);
      this.setData({
        name: data
      });
    });
    setTimeout(() => {
      userDispatch(userTypes.UPDATE_USER_INFO);
    }, 3000);
  }
});

3秒后,将会看到page和component中的name都变成了'laoming',这样就实现了简单的状态管理。

你可能感兴趣的:(小程序,rxjs,状态管理,前端)