regular-redux-util
regularjs X redux
使用步骤
一、将store绑定到外层组件
1、创建 store
; // 外层组件let WrapperComponent = BaseComponent; // 为外层组件添加 StoreProviderWrapperComponent;
参数解释
- reducer:符合redux定义的一个reducer函数 or 对象(使用多个reducer时)。注意:reducer 函数要由 ReduxUtil.createReducer 创建。对象可以由多个reducer函数拼装得到。
- initialState:可选。普通对象{},为store设置一个初始值。
- 建议一定要写,开发时可以很方便的查看state的数据结构
- middlewares:可选,中间件,默认会提供 thunk 和 promise 中间件。当有值的时候,默认会被覆盖。在开发环境还会提供logger中间件。
- promise中间件api参考自:https://github.com/pburtchaell/redux-promise-middleware 5.x版
- 开发环境的判断见下面的第4点
- config:可选,一些配置参数。
- isDev:可选。当前是否为开发环境。默认值由:window.DEBUG || /localhost|\d+.\d+.\d+.\d+/.test(location.hostname) 来确定
- disableImmutableJS:可选。是否不支持immutable,默认为false,表示支持
2、外层组件的模板
<!-- 外层包裹 StoreProvider,并绑定 store 字段 --> ...
二、action
1、创建普通的action
// action-factory.js ; // 方式一let actions;const actionObj = // 图片模块,切换主图 { return payload: bigImg selectIndex ; };actions = ReduxUtil; // 方式二let actions = ReduxUtil;actions;
2、创建异步请求(有副作用)的action
// 1、使用 promise 中间件( payload 的值为一个 promise )// 获取地址 { return payload: service ;} // 2、如果参数需要从 state 中获取,可以 thunk 和 promise 中间件结合使用// 获取异步数据 { // thunk action return { let state = ; let query = Object; // promise action return ; };}// 真正的promise类型的action { return payload: service ;}
promise中间件
- api参考自:https://github.com/pburtchaell/redux-promise-middleware 5.x版
- dispatch该action之后,会立即触发所绑定的reducer中的pedding
- promise对象如果返回Promise.resolve,则触发所绑定的reducer中的fulfilled
- promise对象如果返回Promise.reject,则触发所绑定的reducer中的rejected
- 后面会介绍如何定义reducer,以及pedding、fulfilled、rejected的reducer处理函数
三、reducer
1、创建reducer,绑定action
; // 之前创建的action; // reduer 实例let reducer = ReduxUtil; // 普通的action绑定的reducerreducer; // 一个异步action绑定的3个reducerreducer;reducer;reducer; // 另一种写法,集合在一起reducer; // 另另种,将错误的情况统一处理reducer;
2、在reducer中调用其他reducer
reducer就是一个纯函数,为了更好的复用,可以在一个reducer中调用其他reducer
; // 之前创建的action; // ... // 异步数据获取成功reducer; // ...
四、container组件
container组件,就是绑定了redux的regular组件。
当redux的state发生变化时(dispatch了action,触发reducer之后,state就应当发生变化),会触发所有container组件的更新。
更新:拉取新的state上的数据,更新regular中的data变量,最后调用 this.$update()
。
一个container组件的创建步骤如下:
1、引入需要的action和reduxUtil
;;
2、创建regular组件
let Common = DetailComponent.extend({ template, data: { selVidList: [] // 已选择的sku }, config() {}, init() { }, //...});export default Comment;
3、将regular组件绑定到redux
修改export default Comment;
// 组件对象 `Comment`Common;
参数解释:
- mapState:state改变后,将会执行所有组件的mapState函数。函数的参数是redux的state。函数的返回值
newMappedState
将会使用newMappedState && Object.assign(this.data, newMappedState);
更新组件的data,并最终通过this.$udpate()
更新组件的视图。注意,当使用不可变数据类型(disableImmutableJS: false)的时候,state是一个immutable对象。 - listenStateChange:【该参数可选】mapState的模式可能会引起性能问题。因为reducer触发了state更新之后,会触发所有container组件的mapState。因此可以通过
listenStateChange
参数来做一次筛选,只有当listenStateChange
中的数据发生变化时,才会执行mapState
函数。比如在上面的例子里,只有当state.skuProps
或state.async.goodsCouponList
发生改变的时候,才会执行mapState
函数。 - mapDispatch:【该参数可选】container组件中,如果需要dispatch一个action,那么需要将这个action函数写到
mapDispatch
这个参数下面。比如initSyncData
然后就可以通过this.initSyncData(window.__syncData || {});
来dispatch这个action了。如果不使用mapDispatch
参数,也可以直接适用this.$dispatch
,见下文步骤4。 - options:{emit: boolean}:【该参数可选】emit参数默认为false。当emit设置为true的时候,会在cotainer组件的生命周期中,自动emit三个事件。
- rdx-connected:只触发一次,在首次
mapState
执行之后 - rdx-afterchanged:每次执行
mapState
后都会触发 - rdx-injected:只执行一次,当组件可以获取
this.$refs.xx
的之后触发。如果组件被实例化多次,也会被触发多次。
- rdx-connected:只触发一次,在首次
dispatch action
4、在组件中 // 方法一... { // dispatch action this;}... // 方法二// 如果在上一步`ReduxUtil.connect`中使用了mapDispatch// 并注册了`initSyncData`这个action,那么可以使用方法二,如下:... { // dispatch action this;}...
五、将container添加到外层组件
; WrapperComponent;
... ...
到这里,使用步骤就介绍完了