Awesome

wepy-redux

如果你的小程序项目使用了wepy框架，那么你可以选择这个库作为redux的链接库或者迁移react-redux项目到小程序上

安装

npm install git+https://github.com/dpzxsm/wepy-redux.git --save

介绍

此框架参考wepy提供的wepy-redux传送门，不同的是，采用类似于react-redux的写法，完全兼容react-redux的mapStateToProps和mapDispatchToProps参数，适合熟悉react-redux的开发人员的编写习惯和使用了react的redux项目迁移

用法

部分可以参考rect-redux, 链接

由于wepy框架的组件并不是和react组件具有一样的属性，所以mapStateToProps函数和mapDispatchToProps函数的中ownProps参数只能模拟实现，实现方式有点复杂，不多做解释。 ownProps的属性主要是被连接的组件的props属性，值则是从组件data中获取。当然很多情况，不需要去使用wepy中的props，这种情况下，默认给组件的method中提供了一个injectProps函数用于直接给ownProps添加属性

详细示例可以参考项目中的demo文件夹

API

可以被import的属性	类型	参数	描述
`connect`	`Function`	(func, func, array)	redux链接函数
`setStore`	`Function`	(obj)	设置store的实例
`getStore`	`Function`	()	获取store的实例
`injectGlobalProps`	`Function`	(obj)	全局对ownProps参数注入属性
`injectGlobalPayload`	`Function`	(obj)	全局对action参数注入属性

connect

前两个参数同react-redux, 为函数类型，其中第一个参数可以将state中的属性注入到组件的data中，第二个参数则是将action注入到组件的methods中。第三个参数则是数组类型，可以在页面销毁后清空你想要清空的data属性，主要用于解决小程序的页面缓存bug

示例：

export default connect((state, ownProp) => {
  return {
    name: state.name,
    age: state.age
  }
}, (dispatch, ownProps) => {
  return bindActionCreators({
    ...actions
  }, dispatch)
})

setStore

相当于初始化，必须在项目初始化的时候去设置，可以在app.wpy中调用

示例：

const store = createStore(reducer, applyMiddleware(thunk, logger))
setStore(store)

getStore

某些情况想直接使用store对象，可以来获取实例，通常不建议使用

示例：

const store = getStore()
let state = store.getState()
let dispatch = store.dispatch

injectGlobalProps

顾名思义，就是给所有的ownProps添加静态属性, 大部分情况下用不着，谨慎使用

示例：

injectGlobalProps({ version: '1.0.0' })

injectGlobalProps

顾名思义，就是给所有的action添加静态参数, 大部分情况下用不着，谨慎使用

示例：

injectGlobalPayload({ version: '1.0.0' })

最后

感谢wepy以及它的作者