推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
在小程序开发中使用redux
发布时间:2020-11-29createStore : 是redux里面的一个方法，它绑定一个方法后返回一个store,这个方法是 reducer
reducer : 其实是一个接收redux返回数据的方法，通过store的dispatch方法传递一个变量，这个变量就是reducer要接收的数据
subscribe : 是一个监听方法，在页面调用一次后就不需要再调用，二次调用会解除监听。而每次store的数据发生变化时这个subscribe就会响应，此时可以获取store的状态树，然后设置给页面
combineReducers/createStore 绑定reducer方法到redux和返回一个程序唯一的store
const store = createStore(combineReducers(reducer))流程图如下:
redux可以存储程序的所有数据，通过getState()就能获取。
如果你想给redux发送数据，比如你要更新一个页面上面的文本，想把一改成二。你可以调用
但是这样还不能把它存储进redux的state里面，更别说显示了。
所以需要一个reducer方法，
这样就可以存进state里面。
在页面里面获取任何位置都可以调用到这个数据
通过
这里的store必须在程序里只能有一个，所以可以把它的创建写在一个项目全局方法
app.js里面方便调用。
看似可以的其实这还只能实现手动调用而已。我们知道小程序会在page的data发生改变时更新ui，那么我们还必须实时获取这个state才行，redux给我们提供了一个接口方法：
它在小程序里是这样使用的
onLoad: function (options) { this.unsubscribe = store.subscribe(() => { // 当state改变时触发 this.setData(store.getState().home_reducer) //setData()为专门设置page 的 data用的，它这句的意思是获取state的数据 console.log(store.getState().home_reducer) }) //app.field_onload() }这样就完成了绑定redux到项目 － 创建action － 创建reducer － 获取state数据并设置给page的这么一个流程。
接下来是一个例子：
reducer结构：
var home_reducer= require('./field/reducer') // reducer module.exports = {home_reducer} // 可以引用多个reducerhome_reducer文件：
var data = { text: '一' } function home_reducer(state, action) { if (state == undefined) return data switch (action.type) { case CHANGE_TEXT: return Object.assgin({},state,{text: action.text}); default: return state } }homePage.js：
var store = getApp().store onLoad: function (options) { this.unsubscribe = store.subscribe(() => { // 当state改变时触发 this.setData(store.getState().home_reducer) //setData()为专门设置page 的 data用的，它这句的意思是获取state的数据 console.log(store.getState().home_reducer) }) }, // 一个按钮的点击事件响应方法 on_button_click: function(){ store.dispatch({ type: 'CHANGE_TEXT' , text: '二' }) ; }, // 你还需要在页面退出的时候关闭这个监听 unOnLoad: function(){ this.unsubscribe() } }- 上一篇：微信小程序的事件及生命周期
- 下一篇：微信小程序--Ble蓝牙
