一个完整的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并不复杂,主要提供返回和点赞功能,其中点赞功能只对文章详情有效,研究所详情页会将点赞功能隐藏。