git clone https://github.com/reduxjs/redux.git
import createStore from './redux/createStore';
import combineReducers from './redux/combineReducers';
import compose from './redux/compose';
import applyMiddleware from './redux/applyMiddleware';
import bindActionCreators from './redux/bindActionCreators';
export {
createStore,
combineReducers,
applyMiddleware,
bindActionCreators,
compose
};
修改 redux 源码适配微信小程序!
import { createStore, applyMiddleware } from '../weapp-redux/index'
import reducer from './reducers/index';
const store = createStore(reducer)
export default store;
import { combineReducers } from '../../weapp-redux/index';
import { commonCart } from './cart';
import { goodsDetail } from './goodsDetail';
import { integralZone } from './integralZone';
import { collect } from './collect';
export default combineReducers({
commonCart,
goodsDetail,
integralZone,
collect
})
import {
UPDATE_COLLECT_LIST,
CHECK_COLLECT_STATUS_GOODS
} from '../constants/actionTypes'
const defaultState = {
list: [],
goodsCollectStatus: {}
}
export const collect = (state = defaultState, action) => {
switch (action.type) {
case UPDATE_COLLECT_LIST:
return { ...state, list: action.list };
case CHECK_COLLECT_STATUS_GOODS:
return { ...state, goodsCollectStatus: action.status}
default:
return state;
}
}
// 收藏商品
// 收藏列表更新
export const UPDATE_COLLECT_LIST = 'UPDATE_COLLECT_LIST_GOODS';
// 删除收藏商品
export const DELETE_COLLECT_GOODS = 'DELETE_COLLECT_GOODS';
// 添加收藏商品
export const ADD_COLLECT_GOODS = 'ADD_COLLECT_GOODS';
// 收藏状态查询
export const CHECK_COLLECT_STATUS_GOODS = 'CHECK_COLLECT_STATUS_GOODS';
import * as integral from './integralZone';
import * as goodsDetail from './goodsDetail';
import * as collect from './collect';
export default {
integral,
collect,
goodsDetail
}
注意此处暴露接口命名最好和reducers中保持一直,这样不易名字混淆!
import store from '../index'
import axios from '../../request/axios'
import {
UPDATE_COLLECT_LIST,
CHECK_COLLECT_STATUS_GOODS
} from '../constants/actionTypes';
export function updateCollectList(list){
store.dispatch({
type: UPDATE_COLLECT_LIST,
list
})
}
export function checkCollectStatusGoods(status){
store.dispatch({
type: CHECK_COLLECT_STATUS_GOODS,
status
})
}
// 获取用户收藏列表
export function getCollectList(){
axios.collectList().then((list = []) => {
if(Array.isArray(list) && list.length){
// 所有收藏商品为未选中
list.forEach(cur => cur.ischeck = false);
updateCollectList(list);
}
}).catch(console.log)
}
// 获取商品收藏状态
export function getGoodsCollectStatus(goodsId, goodsType){
axios.getGoodsCollectStatus({goodsId, goodsType}).then(checkCollectStatusGoods).catch(console.log);
}
// 添加收藏商品
export function addGoodsCollect(goodsId, skid){
return new Promise((resolve, reject) => axios.addGoodsCollect({goodsId, skid}).then(resolve).catch(reject));
}
// 删除收藏商品
export function deleteGoodsCollect(id){
return new Promise((resolve, reject) => axios.delCollect({id}).then(resolve).catch(reject));
}
// app.js
import store from './utils/store/index'
App({
store
})
封装一个类似 react-redux 的中间件;
export default function Provider(store){
const originalPage = Page;
const originalComponent = Component;
}
store 访问;
Page = (config = {}) => {
const { onLoad, onUnload,storeTypes = [] } = config;
config.onLoad = function(opts){
// 监听全局状态数据变化
// 设置页面栈变量$store
this.$store = store;
// 设置监听
if(storeTypes && storeTypes.length > 0){
this.unsubscribe = store.subscribe(() => {
let pageData = {}
storeTypes.forEach(storeType => pageData[storeType] = (store.getState()[storeType] || {}))
this.setData(pageData)
})
// 初始化页面数据
store.dispatch({type: `@@redux/INIT${randomString()}`});
}
// 绑定页面生命周期
onLoad && onLoad.call(this, opts);
}
config.onUnload = function(){
onUnload && onUnload.call(this);
// 页面卸载,取消订阅
this.unsubscribe && this.unsubscribe();
}
originalPage(config);
}
注意:
思考:
原理和页面一样,此处不多做解释,直接代码。
Component = (config = {}) => {
const { lifetimes = {}, attached:conattached, detached:condetached, storeTypes = [] } = config;
const { attached, detached } = lifetimes;
config.lifetimes = {
attached:function(){
// 监听全局状态数据变化
// 设置页面栈变量$store
this.$store = store;
// 设置监听
if(storeTypes && storeTypes.length > 0){
this.unsubscribe = store.subscribe(() => {
let pageData = {}
storeTypes.forEach(storeType => pageData[storeType] = (store.getState()[storeType] || {}))
this.setData(pageData)
})
// 初始化页面数据
store.dispatch({type: `@@redux/INIT${randomString()}`});
}
// 绑定页面生命周期
attached && attached.call(this);
conattached && conattached.call(this);
},
detached:function(){
detached && detached.call(this);
condetached && condetached.call(this);
// 组件卸载,取消订阅
this.unsubscribe && this.unsubscribe();
}
}
originalComponent(config);
}
import isPlainObject from '../utils/isPlainObject';
const randomString = () => Math.random().toString(36).substring(7).split('').join('.');
const subscribeInit = (config, store, page) => {
let { storeTypes = [] } = config;
// 设置页面栈变量$store
page.$store = store;
// 设置监听
if(storeTypes && storeTypes.length > 0){
page.unsubscribe = store.subscribe(() => {
let pageData = {}
storeTypes.forEach(storeType => pageData[storeType] = (store.getState()[storeType] || {}))
page.setData(pageData)
})
// 初始化页面数据
store.dispatch({type: `@@redux/INIT${randomString()}`});
}
}
export default function Provider(store){
if(!store && typeof store !== 'object'){
throw new Error(`Expected the root store to be a object.`)
}
const originalPage = Page;
const originalComponent = Component;
Page = (config = {}) => {
const { onLoad, onUnload } = config;
config.onLoad = function(opts){
// 监听全局状态数据变化
subscribeInit(config, store, this);
// 绑定页面生命周期
onLoad && onLoad.call(this, opts);
}
config.onUnload = function(){
onUnload && onUnload.call(this);
// 页面卸载,取消订阅
this.unsubscribe && this.unsubscribe();
}
originalPage(config);
}
Component = (config = {}) => {
const { lifetimes = {}, attached:conattached, detached:condetached } = config;
const { attached, detached } = lifetimes;
config.lifetimes = {
attached:function(){
// 监听全局状态数据变化
subscribeInit(config, store, this);
// 绑定页面生命周期
attached && attached.call(this);
conattached && conattached.call(this);
},
detached:function(){
detached && detached.call(this);
condetached && condetached.call(this);
// 组件卸载,取消订阅
this.unsubscribe && this.unsubscribe();
}
}
originalComponent(config);
}
return {
Page,
Component
}
}
// collect.js
import {
getCollectList,
addGoodsCollect,
deleteGoodsCollect
} from '../../utils/store/actions/collect'
Page({
storeTypes: ['collect'],
data: {},
onLoad(){
getCollectList();
}
})
// collect.wxml
<view class="rui-mb15" wx:for="{{ collect.list }}" wx:key="collectList">
<rui-swipe-cell right-width="{{ right }}" disabled="{{isEdit}}">
<view class="rui-form-li rui-flex-ac">
<radio color="#e24c4e"
class="rui-mr15"
data-item="{{item}}"
data-index="{{index}}"
catchtap="chooseGoods"
checked="{{item.check}}"
wx:if="{{isEdit}}"></radio>
<view class="rui-fa rui-pr rui-mr40" catchtap="routeTo" data-url="../goodsDetail/goodsDetail?goodsId={{item.tyfogoodsid}}&isFromBc={{item.goodsType}}" data-type="{{item.goodsType}}" data-id="{{item.tyfogoodsid}}">
<view class="rui-now-btn" wx:if="{{item.isPot == 1}}">现货</view>
<image lazy-load="true" src="{{item.mainpic}}" class="rui-goods-img"></image>
</view>
<view class="rui-fg" catchtap="routeTo" data-url="../goodsDetail/goodsDetail?goodsId={{item.tyfogoodsid}}&isFromBc={{item.goodsType}}" data-type="{{item.goodsType}}" data-id="{{item.tyfogoodsid}}">
<view class="rui-fs28 rui-line3 rui-color4 rui-collect-title">{{item.goodsname}}</view>
<!-- <view class="rui-fs24 rui-color4 rui-mt20 rui-mb20">蓝色</view> -->
<view class="rui-mt30">
<text class="rui-fs30 rui-color17 rui-mr20">¥{{item.marketprice}}</text>
<text class="rui-fs20" wx:if="{{showMoney}}">最高赚<text class="rui-color17">{{item.predictAmt}}</text>元</text>
</view>
</view>
</view>
<view slot="right" class="rui-cancel-collect" data-item="{{item}}" catchtap="cancelCollect">取消收藏</view>
</rui-swipe-cell>
</view>