wxapp-redux

Installation

wxapp-redux 依赖于 Redux.

yarn add wxapp-redux

然后, 复制 dist/wxapp-redux.js 或 dist/wxapp-redux.min.js 到微信小程序项目中，比如/lib。当然，不要忘记导入redux.js。

Usage

Provider(store: Store)([appOptions: Object])

首先，需要注入store到全局的App，可以使用Provider：

Provider(store)({
  foo: 42		
})

这里会将store绑定到appOptions.store属性上，这就要确保appOptions.store没有被占用。如果需要换其他key，需要传入appOptions.storeKey：

Provider(store)({
  storeKey: 'foo'
})

Provider将多余的属性传递给App，并在其中已经内置了App。如果不想内置App和Page，可以将 __WXAPPREDUXEXPORT__ 设置为 true：

const options = Provider(store)({
  foo: 42,
  __WXAPPREDUXEXPORT__: true
})
 
App(options)

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])([pageOptions: Object = {}], [style: Object = undefined])

在Page中，使用connect可以将redux store绑定到view上：

function mapStateToProps() {
  //...
}
 
function mapDispatchToProps() {
  //...
}
 
connect(mapStateToProps, mapDispatchToProps)()

connect 将 state 绑定到 pageOption.data 上，这样在视图中就可以使用 {{foo}} 来绑定属性。dispatch 会被绑定到 pageOption 上，可以通过视图的 bindTap 等事件触发 dispatch(action) 来改变 store。

pageOptions 的其他属性会原样传递给 Page(pageOptions)

同样，connect 也内置了 Page。

如果希望使用 CSS Modules，可以将 style 传递给 connect。这样 style 会被绑定到 pageOption.data.style。

下面是一个计数器 connect 的简单使用：

/**
 * reducers/counter.js
 */
import { ActionType } from '../actions/counter'
 
export const initState = {
  value: 5,
  max: 10,
  min: 0
}
 
export default function(state = initState, action) {
  const { type, payload } = action
 
  switch(type) {
  case ActionType.COUNTER_INC:
    return Object.assign({}, state, {
      value: Math.min(state.max, state.value + 1)
    })
 
  case ActionType.COUNTER_DEC:
    return Object.assign({}, state, {
      value: Math.max(state.min, state.value - 1)
    })
 
  default: return state
  }
}
 
 
 
/**
 * actions/counter.js
 */
export const ActionType = {
  COUNTER_INC: 'COUNTER_INC',
  COUNTER_DEC: 'COUNTER_DEC'
}
 
export function counterInc() {
  return {
    type: ActionType.COUNTER_INC
  }
}
 
export function counterDec() {
  return {
    type: ActionType.COUNTER_DEC
  }
}
 
 
/**
 * pages/index/index.js
 */
import { compose } from 'redux'
import { connect } from 'wxapp-redux'
import * as action from '../../actions/counter'
import style from '../../styles/counter.css'
 
function mapStateToProps(state) {
  return {
    counter: state.counter.value
  }
}
 
function mapDispatchToProps(dispatch) {
  return {
    inc: compose(dispatch, action.counterInc),
    dec: compose(dispatch, action.counterDec)
  }
}
 
 
connect(mapStateToProps, mapDispatchToProps)({}, style)

/**
 * styles/counter.css
 */
.btnHover {
  background: blue;
}

<!-- pages/index/index.html -->
<view>
  <button size="mini" bindtap="dec" hover-class="{{style.btnHover}}">-</button>
  <view>{{counter}}</view>
  <button size="mini" bindtap="inc">+</button>
</view>

TODO BuildTools

TODO DevTools

LICENSE

MIT License (MIT)

Copyright (c) Rabbit

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.