为什么使用redux

redux是一个非常棒的状态管理工具。它有很好的思想，使得应用的model可预测。

迭代

  1. 原始的状态管理

起初在开发小程序时，只是为了做一些展示性质的页面。所以，并不需要状态管理工具。

我们使用了小程序的自带数据管理工具：

  • this.data

类似于react的 setData ，当使用此函数更新数据后，依赖这些数据的UI会做出响应的更新。所以相对于古老的jquery来说已经很先进了。但这能作用于本页面，无法于其他页面通信。

  • app.globalData

常用于全局但一些静态数据，比如登录状态、设备信息等等。各个页面都能获取，可用于页面间通信。但也容易被某个页面进行串改，变得不可预测。

上面红色字体说页面间通信如何做到的呢，就是A页面改变了 app.globalData 之后，B页面在 onShow 的生命周期函数里进行检测，从而更新数据。这样对一个简单的小程序来说，完全没有问题。

  1. 引入EventEmitter

需求源源不断的过来，原始的状态管理变的越来越难以维护。

以点赞为例，详情页的点赞之后，列表页和个人中心页的点赞数量都要更新，显然，每个页面都要在onShow里做判断，然后更新相应的数据。很繁琐。

所以，我在项目中，我引入了EventEmitter，并将其实例导出(单例模式)，并在app.js内将其绑定到 app.gloabalData 上，只要在需要用到点赞数据的页面的 onLoad 里监听下 app.globalData.event.on('detail_like_event') ，在点赞或取消点赞后，只需要app.globalData.event.emit('detail_like_event')就能触发所有函数，从而更新数据。

  1. 还是得用redux

后来呀，我们要做社区，做IM（即时聊天）了。😢EventEmitter 的事件名越来越多，越来越不好维护了。终于，决定用redux了。

redux在小程序里抽象出了一个数据层，所有页面是共享的。更改数据的纯函数会集中到一块处理，而且必须根据action来做更改。这使得数据的变化可以预测。

它还有什么好处呢？

  • 处理异常情况变得简单
  • 简化代码量
  • 降低耦合
  • 方便日后分包加载
  • 可实现预加载，提高页面展示速度

如何使用

app.js

  1. import WeAppRedux from './redux/index.js';
  2. import createStore from './redux/createStore.js';
  3. import reducer from './store/reducer.js';
  4. const { Provider } = WeAppRedux;
  5. const store = createStore(reducer) // redux store
  7. App(
  8.   Provider(store)({
  9.     onLaunch: function (e) {...},
  10.     onHide: function (params) {...},
  11.     onShow: function (e) {...},
  12.   })
  13. )

page.js

import { connect } from '../../redux/index'
import { acStartFetch, acEndFetch } from '../../actions/index'

//获取应用实例
const app = getApp();
const pageConfig = {
  data: {},
  onLoad() {}
}
const mapStateToData = ({ isFetching }) => {
  return {
    isFetching
  }
}
const mapDispatchToPage = (dispatch) => ({
  startFetch: () => {
    return acStartFetch()
  },
  endFetch: () => {
    return acEndFetch()
  }
})
const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)
Page(nextPageConfig)