小程序框架wepy+redux的联合开发小程序

redux基础

在redux整体框架中，由store统一管理系统数据，因此，需要先设计action，reducer，然后由reducer创建store。

其中：
action通过action creator函数生成，action creator函数则是一个返回包含type字段的对象。
reducer则是用于根据dispatch的action类型的生成新的state的纯函数。
redux提供createStore方法接收一个reducer，返回一个store对象。该对象中包含getState，dispatch方法，用于获取内部状态state和发送action。

// action Type:
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

// action:
function increment(payload) {
  return {
    type: INCREMENT
  }
}

function decrement(payload) {
  return {
    type: DECREMENT
  }
}

// reducer:
function counter(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1
    case DECREMENT:
      return state - 1
    default:
      return 0
  }
}

// store:
const store = createStore(combineReducers({ counter }))

// 获取state
console.log(store.getState())

// 派发action
store.dispatch({type: 'INCREMENT'})

// 获取更新后的state
console.log(store.getState())

以上生成整个框架中所需的store对象。

连接wepy和redux

连接react和redux之间提供了react-redux包，对外提供了Provider组件，将store传递到子页面（组件）中，提供connect方法，将state和action注入到子页面（组件）中。

对于wepy，同样提供了wepy-redux包，对外提供setStore，getStore，以及connect方法。
setStore是将store注入到小程序的所有页面中；
getStore用于在页面中获取Store对象；
connect将state和actions注入到子页面（组件）中；

// 在app.wpy中将store注入页面（组件中）
setStore(store)

// 在其他页面中使用connect将页面所需的数据注入到页面中

注意：使用connect方法将states和actions注入到页面(组件)中时，是将states注入到小程序的computed属性中，将actions注入到methods属性中，在js逻辑中可以通过this.XXX和this.methods.XXX获取注入的state和action。

wepy-redux地址：https://www.npmjs.com/package/wepy-redux