小程序模板网

在小程序开发中使用redux

作者:cat6572325,来自原文地址
  • createStore : 是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发送数据,比如你要更新一个页面上面的文本,想把一改成二。你可以调用

dispatch({type: CHANGE_TEXT,data: '二'});

但是这样还不能把它存储进redux的state里面,更别说显示了。
所以需要一个reducer方法,

home_reducer(state,action)
{
  switch(action.type)
  {
   case CHANGE_TEXT:
   retuen Object.assgin({},state,{data: action.data})
  }
}

这样就可以存进state里面。
在页面里面获取任何位置都可以调用到这个数据
通过

store.getState().home_reducer

这里的store必须在程序里只能有一个,所以可以把它的创建写在一个项目全局方法

app.js

里面方便调用。
看似可以的其实这还只能实现手动调用而已。我们知道小程序会在page的data发生改变时更新ui,那么我们还必须实时获取这个state才行,redux给我们提供了一个接口方法:

subscribe

它在小程序里是这样使用的

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的这么一个流程。
接下来是一个例子:

var reducer = require('./reducer/index') //引入reducer
const {createStore, combineReducers, applyMiddleware} = require('libs/redux.js') //引入redux接口
const store = createStore(combineReducers(reducer)) //创建store

App({
  store
}) // 绑定到全局的app.js

reducer结构:

var  home_reducer= require('./field/reducer') // reducer
module.exports = {home_reducer} // 可以引用多个reducer

home_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()
     }
   }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23529.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询