canvas教程

微信小程序全面实战,架构设计 躲坑攻略(3)

字号+ 作者:H5之家 来源:H5之家 2017-01-11 08:00 我要评论( )

一个完整的Redux方案如下,包括:将Store注入到App中、将state的数据和reducer的方法映射到Page中。一旦state发生变化,Page.data也会更新,进而触发页面的重新渲染。 // APP的逻辑import { createStore, applyMidd

一个完整的Redux方案如下,包括:将Store注入到App中、将state的数据和reducer的方法映射到Page中。一旦state发生变化,Page.data也会更新,进而触发页面的重新渲染。

// APP的逻辑 import { createStore, applyMiddleware, combineReducers } from './vendors/redux.js'; import thunk from './vendors/redux-thunk.js'; import { Provider } from './vendors/weapp-redux.js'; // import reducers import { rootReducer } from './redux/reducer.js'; // 从Storage读取数据 let entities = wx.getStorageSync('entities') || {}; const store = createStore( rootReducer, { // 将读取的数据注入到store中 entities: entities }, applyMiddleware( thunk ) ); let appConfig = { onLaunch: function() {}, onHide: function() { let state = store.getState(), cacheEntities = {}; // 体积大于2M,直接清空,防止缓存占用过大体积 if (sizeof(state.entities) <= 2 * 1024 * 1024) { cacheEntities = state.entities; } // 退出时将entities缓存下来 wx.setStorageSync('entities', cacheEntities); } }; App(Provider(store)(appConfig)); // Page的逻辑 import { connect } from '../../vendors/weapp-redux.js'; import { fetchArticleDetail } from '../../redux/models/articles.js'; let pageConfig = { data: { id: 0, postsHash: {} }, onLoad: function(params) { var me = this, { id, postsHash } = me.data; me.fetchArticleDetail(id, function() {}, function() {}); } } // 考虑到列表页已经获取到部分数据 // 为了在详情页第一时间利用这些数据,我们将params传入 // 防止以后需要用data的数据,我们将data也一并传入 let mapStateToData = (state, params, data) => { return { id: params.id, postsHash: state.entities.posts } }; let mapDispatchToPage = dispatch => ({ fetchArticleDetail: (id, callback, errorCallback) => dispatch(fetchArticleDetail(id, callback, errorCallback)), }); pageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig) Page(pageConfig);

需要注意的是,为了保证第一时间能拿到数据,我们对 wechat-weapp-redux/src/connect.js 做了优化调整,修改的地方如下

// 修改了以下两个函数 // 可以对照原项目修改,也可以直接拿我的模板项目使用 function handleChange(options) { if (!this.unsubscribe) { return } const state = this.store.getState(); // 将data也一并传入 const mappedState = mapState(state, options, this.data); if (!this.data || shallowEqual(this.data, mappedState)) { return; } this.setData(mappedState) } function onLoad(options) { this.store = app.store; if (!this.store) { warning("Store对象不存在!") } if (shouldSubscribe) { this.unsubscribe = this.store.subscribe(handleChange.bind(this, options)) // 第一次处理的时候也传入options handleChange.apply(this, [options]) } if (typeof _onLoad === 'function') { _onLoad.call(this, options) } }

引入Redux的优势

引入Redux的好处在于可以集中管理数据,并且让Page的代码保持绝对简单,让所有的组件都变成简单可复用的无状态组件。

此外,Redux还让离线缓存更方便,数据复用更简单。

引入Redux解决了数据散布各处的问题,参考Redux的管理思路,我们构思了一套简单组件化解决方案:假设我们把所有的组件都设计成无状态组件,而组件的数据来源是Page.data,那么我们是否也可以将组件数据的管理抽离到一个单独的文件中呢?接下来讲讲我们使用的简单的组件化解决方案。

简单的组件化解决方案

这份组件化解决方案的核心就在于把组件的关联数据集中起来管理,只暴露出默认数据和数据的操作函数。

比如好奇心日报的详情页有个Toolbar,该Toolbar并不复杂,主要提供返回和点赞功能,其中点赞功能只对文章详情有效,研究所详情页会将点赞功能隐藏。

微信小程序全面实战,架构设计 && 躲坑攻略

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信开发者平台,微信开发者社区,微信小程序开发者社区

    微信开发者平台,微信开发者社区,微信小程序开发者社区

    2016-12-24 12:00

网友点评