mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit 57706b90eba1797765a9177a31d4feb2228040c0 1 parent 5e7140d0

将获取缓存方法调整至Action.js中，删除了部分调试log。review by yuliang。

Inline Side-by-side
Showing 7 changed files with 206 additions and 217 deletions
... ... @@ -39,6 +39,10 @@ import {
} from './reducers/category/categoryActions';
import {
setCurrentChannelB,
} from './reducers/categoryB/categoryBActions';
import {
setBrandSelectedChannel,
} from './reducers/brand/brandActions';
... ... @@ -77,12 +81,20 @@ export default function native(platform) {
if (this.props.type == 0) {
if (this.props.channelId == '1') {
store.dispatch(setCurrentChannelId('boy'));
//B版设置channelID和名称
store.dispatch(setCurrentChannelB('1', 'boy'));
} else if (this.props.channelId == '2') {
store.dispatch(setCurrentChannelId('girl'));
//B版设置channelID和名称
store.dispatch(setCurrentChannelB('2', 'girl'));
} else if (this.props.channelId == '3') {
store.dispatch(setCurrentChannelId('kids'));
//B版设置channelID和名称
store.dispatch(setCurrentChannelB('3', 'kids'));
} else if (this.props.channelId == '4') {
store.dispatch(setCurrentChannelId('lifestyle'));
//B版设置channelID和名称
store.dispatch(setCurrentChannelB('4', 'lifestyle'));
}
} else if (this.props.type == 1) {
if (this.props.channelId) {
... ...
... ... @@ -27,6 +27,7 @@ export default class CategoryB extends Component {
let {
isFetching,
currentChannelId,
currentChannelValue,
currentCateId,
categoryList,
currentCateValue,
... ... @@ -41,6 +42,7 @@ export default class CategoryB extends Component {
categoryList={categoryList}
currentCateId={currentCateId}
currentChannelId={currentChannelId}
currentChannelValue={currentChannelValue}
currentCateValue={currentCateValue}
currentSubCateData={currentSubCateData}
cacheSubCateData={cacheSubCateData}
... ...
... ... @@ -24,13 +24,10 @@ export default class CategoryBList extends Component {
super(props);
this.renderRow = this.renderRow.bind(this);
this.renderSeparator = this.renderSeparator.bind(this);
// this._pressLeftRow = this._pressLeftRow.bind(this);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
this.subRenderRow = this.subRenderRow.bind(this);
this.state = {
offsetx: 0,
};
this.cacheChannel='';
this.cacheCategory='';
}
componentWillMount() {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
... ... @@ -38,11 +35,15 @@ export default class CategoryBList extends Component {
componentWillUpdate(nextProps,nextState){
if(this.cacheChannel!=nextProps.currentChannelId){
this.setState({offsetx:0});
this.refs.categoryList && this.refs.categoryList.scrollTo({x: 0, y: 0, animated: false});
this.cacheChannel=nextProps.currentChannelId;
}
if(this.cacheCategory != nextProps.currentCateId){
this.refs.subCategoryList && this.refs.subCategoryList.scrollTo({x: 0, y: 0, animated: false});
this.cacheCategory = nextProps.currentCateId;
}
}
// _pressLeftRow(value,rowID){
// if(value.sub.length==1){
... ... @@ -129,22 +130,11 @@ export default class CategoryBList extends Component {
render() {
let {categoryList, currentSubCateData} = this.props;
if(!categoryList || categoryList.length == 0 || !currentSubCateData || currentSubCateData.length == 0 || categoryList == null)
if(!categoryList || categoryList.length == 0 || !currentSubCateData || currentSubCateData.length == 0)
return;
let cateList = [];
let subCateList;
if(categoryList.get("boy")){
cateList=categoryList.get("boy").toArray();
}
// if(categoryList.get(this.props.currentChannelId).get(this.props.currentCateId)){
// let currentCate=categoryList.get(this.props.currentChannelId).get(this.props.currentCateId);
// subCateList=currentCate.get('sub').toArray();
// }
// console.log("chenlin", "currentSubCateData:" + JSON.stringify(currentSubCateData));
let cateList = categoryList.get(this.props.currentChannelValue) ? categoryList.get(this.props.currentChannelValue).toArray() : [];
let detailDataSource = {
bannerInfo: currentSubCateData.get('bannerInfo'),
... ... @@ -198,7 +188,7 @@ let styles = StyleSheet.create({
subContentContainer: {
backgroundColor: 'white',
width: 210 * DEVICE_WIDTH_RATIO,
height: height - 156,
height: height - 156 - 5,
marginLeft: 5 * DEVICE_WIDTH_RATIO,
marginTop: 5 * DEVICE_WIDTH_RATIO,
marginRight: 5 * DEVICE_WIDTH_RATIO,
... ...
... ... @@ -53,13 +53,13 @@ export default class HotBrandList extends Component{
return null;
}
let imageUrl = getSlicedUrl(rowData.get("brand_ico"), 106, 106, 2);
let imageUrl = getSlicedUrl(rowData.get("brand_ico"), 70, 29, 2);
let brandName = rowData.get("brand_name");
return (
<TouchableOpacity onPress={() => this.props.onPressHotBrandItem && this.props.onPressHotBrandItem(rowData.toJS(),rowID)}>
<TouchableOpacity onPress={() => this.props.onPressHotBrandItem && this.props.onPressHotBrandItem(rowData.toJS())}>
<View style={styles.rowContainer}>
<Image style={styles.rowThumbnail} source={{uri: imageUrl}}/>
<View style={styles.rowImageContainer}><Image style={styles.rowThumbnail} source={{uri: imageUrl}}/></View>
<Text style={styles.rowText} numberOfLines={1}>{brandName}</Text>
</View>
</TouchableOpacity>
... ... @@ -72,14 +72,19 @@ export default class HotBrandList extends Component{
render(){
let {data} = this.props;
console.log("chenlin", "data数据长度:" + data.length);
return(
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
<View style={styles.container}>
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
);
}
... ... @@ -91,6 +96,10 @@ const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flexWrap: 'wrap',
},
contentContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
... ... @@ -99,15 +108,15 @@ let styles = StyleSheet.create({
},
headerContainer:{
width: 200 * DEVICE_WIDTH_RATIO,
width: 210 * DEVICE_WIDTH_RATIO,
height: 50 * DEVICE_WIDTH_RATIO,
marginLeft: 5 * DEVICE_WIDTH_RATIO,
marginRight: 5 * DEVICE_WIDTH_RATIO,
paddingLeft: 5 * DEVICE_WIDTH_RATIO,
paddingRight: 5 * DEVICE_WIDTH_RATIO,
},
headerText:{
position: 'absolute',
left: 0,
left: 5 * DEVICE_WIDTH_RATIO,
bottom: 11 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
... ... @@ -124,23 +133,30 @@ let styles = StyleSheet.create({
headerLine:{
width: 200 * DEVICE_WIDTH_RATIO,
height: 0.5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#f0f0f0',
backgroundColor: '#E0E0E0',
left: 0,
top: 45 * DEVICE_WIDTH_RATIO,
},
rowContainer:{
width: 70 * DEVICE_WIDTH_RATIO,
height: 90 * DEVICE_WIDTH_RATIO,
height: 70 * DEVICE_WIDTH_RATIO,
},
rowImageContainer:{
width: 70 * DEVICE_WIDTH_RATIO,
height: 50 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
},
rowThumbnail:{
width: 70 * DEVICE_WIDTH_RATIO,
height: 70 * DEVICE_WIDTH_RATIO,
height: 29 * DEVICE_WIDTH_RATIO,
},
rowText:{
width: 70 * DEVICE_WIDTH_RATIO,
height: 20 * DEVICE_WIDTH_RATIO,
fontSize: 10 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
textAlign: 'center',
... ...
... ... @@ -51,6 +51,9 @@ export default class HotCategoryList extends Component{
renderRow(rowData, sectionID, rowID, highlightRow){
// console.log("chenlin", "rowData数据：" + JSON.stringify(rowData));
if (!rowData || rowData.length == 0) {
return null;
}
... ... @@ -59,8 +62,15 @@ export default class HotCategoryList extends Component{
let categoryName = rowData.get("category_name");
//数据类型，纯文字型和图片型，列表中会出现纯文本的情况,比如MORE
let dataType = rowData.get("type");
if(dataType && dataType === 'text')
let dataType = rowData.get("data_type");
// console.log("chenlin", "rowData数据：" + JSON.stringify(rowData));
// console.log("chenlin", "dataType数据：" + dataType);
// return(
// <Text style={styles.rowText} numberOfLines={1}>{categoryName}</Text>
// );
if(dataType && dataType == 'text')
return (
<TouchableOpacity onPress={() => this.props.onPressHotCategoryItem && this.props.onPressHotCategoryItem(rowData.toJS(),rowID)}>
<View style={styles.rowContainer}>
... ... @@ -85,14 +95,21 @@ export default class HotCategoryList extends Component{
render(){
let {data} = this.props;
console.log("chenlin", "data数据长度:" + data.length);
// console.log("chenlin", "data数据:" + JSON.stringify(data));
return(
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
<View style={styles.container}>
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
);
}
... ... @@ -104,23 +121,28 @@ const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flexWrap: 'wrap',
},
contentContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems:'flex-start',
backgroundColor:'white',
alignItems:'center',
backgroundColor: '#f5f7f6',
},
headerContainer:{
width: 200 * DEVICE_WIDTH_RATIO,
width: 210 * DEVICE_WIDTH_RATIO,
height: 50 * DEVICE_WIDTH_RATIO,
marginLeft: 5 * DEVICE_WIDTH_RATIO,
marginRight: 5 * DEVICE_WIDTH_RATIO,
paddingLeft: 5 * DEVICE_WIDTH_RATIO,
paddingRight: 5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#ffffff',
},
headerText:{
position: 'absolute',
left: 0,
left: 5 * DEVICE_WIDTH_RATIO,
bottom: 11 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
... ... @@ -137,23 +159,26 @@ let styles = StyleSheet.create({
headerLine:{
width: 200 * DEVICE_WIDTH_RATIO,
height: 0.5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#f0f0f0',
backgroundColor: '#E0E0E0',
left: 0,
top: 45 * DEVICE_WIDTH_RATIO,
},
rowContainer:{
width: 70 * DEVICE_WIDTH_RATIO,
height: 90 * DEVICE_WIDTH_RATIO,
height: 70 * DEVICE_WIDTH_RATIO,
paddingLeft: 8.5 * DEVICE_WIDTH_RATIO,
paddingRight: 8.5 * DEVICE_WIDTH_RATIO,
},
rowThumbnail:{
width: 70 * DEVICE_WIDTH_RATIO,
height: 70 * DEVICE_WIDTH_RATIO,
width: 53 * DEVICE_WIDTH_RATIO,
height: 53 * DEVICE_WIDTH_RATIO,
},
rowText:{
width: 70 * DEVICE_WIDTH_RATIO,
width: 53 * DEVICE_WIDTH_RATIO,
height: 17 * DEVICE_WIDTH_RATIO,
fontSize: 10 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
textAlign: 'center',
... ...
... ... @@ -67,46 +67,32 @@ class CategoryBContainer extends Component {
id = 1;
value='boy';
}
this._onSelectChannel(id, value);
this._onSelectChannel({id, value});
}
);
}
componentDidMount() {
this.props.actions.getCategoryBList();
let currentChannelId = this.props.categoryB.currentChannelId;
this.props.actions.getCategoryBList(currentChannelId);
}
componentWillUnmount() {
}
_onSelectChannel(channelId, channelValue) {
//this.props.actions.setCurrentCateB(0, "");
this.props.actions.setCurrentChannelB(channelId, channelValue);
_onSelectChannel(channel) {
this.props.actions.setCurrentChannelB(channel.id, channel.value);
this.props.actions.getCategoryBFirstSubCategoryDetail(channel.id);
}
_onSelectCategory(category,rowID) {
// console.log("chenlin", "调用点击事件：_onSelectCategory，参数为：" + JSON.stringify(category) + "ID: " + rowID);
let currentChannelId = this.props.categoryB.currentChannelId;
let categoryId = category.category_id;
let categoryValue = category.category_name;
//检查缓存是否存在数据，如果不存在则获取
let cache = this.props.categoryB.cacheSubCateData;
let key = "CHA_" + currentChannelId + "_CAT_" + categoryId;
let categoryData = cache.get(key);
//未命中，访问网络数据
if (!categoryData) {
// console.log("chenlin", "未命中缓存，调用接口访问数据：" + key);
this.props.actions.getCategoryBSubDetail(currentChannelId, categoryId, categoryValue);
}
//已命中，展示缓存数据
else{
// console.log("chenlin", "命中缓存：" + key);
this.props.actions.getCategoryBSubDetailFromCache(categoryData, categoryId, categoryValue);
}
this.props.actions.getCategoryBSubCategoryDetail(categoryId, categoryValue);
}
_onPressBannerResourceItem(value){
... ... @@ -114,20 +100,22 @@ class CategoryBContainer extends Component {
}
_onPressHotCategoryItem(value, index) {
// console.log("chenlin", "调用点击事件：_onPressHotCategoryItem，参数为：" + value + "index: " + index);
console.log("chenlin", "调用点击事件：_onPressHotCategoryItem，参数为：" + JSON.stringify(value) + "index: " + index);
let currentChannelId = this.props.categoryB.currentChannelId;
this.props.actions.jumpToCategory(value, index, currentChannelId);
}
_onPressHotBrandItem(){
// console.log("chenlin", "调用点击事件：_onPressHotBrandItem");
_onPressHotBrandItem(data){
console.log("chenlin", "调用点击事件：_onPressHotBrandItem,参数：" + JSON.stringify(data));
ReactNative.NativeModules.YH_CommonHelper.pushBrandVC(data);
}
render() {
let {
isFetching,
currentChannelId,
currentChannelValue,
currentCateId,
categoryList,
currentCateValue,
... ... @@ -141,6 +129,7 @@ class CategoryBContainer extends Component {
isFetching={isFetching}
categoryList={categoryList}
currentChannelId={currentChannelId}
currentChannelValue={currentChannelValue}
currentCateId={currentCateId}
currentCateValue={currentCateValue}
currentSubCateData={currentSubCateData}
... ...
... ... @@ -23,7 +23,7 @@ const {
} = require('../../constants/actionTypes').default;
export function getCategoryBList() {
export function getCategoryBList(channel_id) {
return (dispatch, getState) => {
let {app, classify} = getState();
... ... @@ -32,7 +32,8 @@ export function getCategoryBList() {
return new CategoryBService(app.host).getCategoryBList()
.then(json => {
dispatch(getCategoryBListSuccess(json));
dispatch(getCategoryBSubDetail(1, 5, ""));
dispatch(getCategoryBFirstSubCategoryDetail(channel_id));
})
.catch(error => {
dispatch(getCategoryBListFailure());
... ... @@ -40,19 +41,61 @@ export function getCategoryBList() {
};
}
/**
* 获取子分类的数据，逻辑上先判断缓存数据是否存在，不存在则从网络获取
**/
export function getCategoryBSubCategoryDetail(category_id, category_value){
return (dispatch, getState) => {
let {categoryB} = getState();
let currentChannelId = categoryB.currentChannelId;
//检查缓存是否存在数据，如果不存在则获取
let cache = categoryB.cacheSubCateData;
let key = getSubDetailCacheKey(currentChannelId, category_id);
let categoryData = cache.get(key);
//设置当前的类别信息
dispatch(setCurrentCateB(category_id, category_value));
//未命中，访问网络数据
if (!categoryData) {
// console.log("chenlin", "未命中缓存，调用接口访问数据：" + key);
dispatch(getCategoryBSubDetail(currentChannelId, category_id, category_value));
}
//已命中，展示缓存数据
else{
// console.log("chenlin", "命中缓存：" + JSON.stringify(categoryData));
dispatch(getCategoryBSubDetailData(categoryData));
}
};
}
/**
* 获取子分类
**/
function getSubDetailCacheKey(channel_id, category_id){
let key = "CHA_" + channel_id + "_CAT_" + category_id;
return key;
}
/**
* 网络获取子分类的数据
**/
export function getCategoryBSubDetail(channel_id, category_id, category_value) {
return (dispatch, getState) => {
let {app, classify} = getState();
let {app} = getState();
dispatch(getCategoryBSubDetailRequest());
return new CategoryBService(app.host).getCategoryBSubDetail(channel_id, category_id)
.then(json => {
let payload = parseCategoryBSubDetail(channel_id, category_id, json);
dispatch(setCurrentCateB(category_id, category_value));
dispatch(getCategoryBSubDetailSuccess(payload));
})
.catch(error => {
... ... @@ -62,12 +105,29 @@ export function getCategoryBSubDetail(channel_id, category_id, category_value) {
}
/**
* 从缓存获取的子分类的数据
*获取指定channel的第一个分类数据
**/
export function getCategoryBSubDetailFromCache(sub_data, category_id, category_value) {
export function getCategoryBFirstSubCategoryDetail(channel_id) {
return (dispatch, getState) => {
dispatch(setCurrentCateB(category_id, category_value));
dispatch(getCategoryBSubDetailData(sub_data));
let {categoryB} = getState();
let categoryList = categoryB.categoryList;
let category = null;
if(channel_id == '1'){
category = categoryList.get('boy').get(0);
}
else if(channel_id == '2'){
category = categoryList.get('girl').get(0);
}
else if(channel_id == '3'){
category = categoryList.get('kids').get(0);
}
else if(channel_id == '4'){
category = categoryList.get('lifestyle').get(0);
}
dispatch(getCategoryBSubCategoryDetail(category.get('category_id'), category.get('category_name')));
};
}
... ... @@ -75,138 +135,33 @@ export function getCategoryBSubDetailFromCache(sub_data, category_id, category_v
/**
*在尾部添加一个MORE
**/
function parseCategoryBSubDetail(channel_id, category_id, json) {
if(!json){
function parseCategoryBSubDetail(channel_id, category_id, data) {
if(!data){
return;
}
// let oldData = json ? json : [];
// let newData=[];
// oldData.map((item, i) => {
// let newSortInfo = [];
// let all = {
// category_name: '全部'+item.category_name,
// parent_id: item.category_id,
// // parent_id: item.parent_id,
// relation_parameter:item.relation_parameter,
// node_count:item.node_count,
// };
// if(item.sortInfo){
// newSortInfo=[...item.sortInfo, all];
// }else{
// newSortInfo.push(all);
// }
// newData.push({
// sortInfo:newSortInfo,
// category_name:item.category_name,
// category_id:item.category_id,
// parent_id:item.parent_id,
// relation_parameter:item.relation_parameter,
// sort_ico:item.sort_ico,
// node_count:item.node_count,
// brandInfo: item.brandInfo,
// });
// });
// console.log("chenlin", "处理后的JSON数据：" + JSON.stringify(newData));
let key = "CHA_" + channel_id + "_CAT_" + category_id;
if(data.sortInfo){
let more = {
category_name: 'more',
parent_id: category_id,
relation_parameter:{},
data_type:'text',
};
data.sortInfo.push(more);
}
let key = getSubDetailCacheKey(channel_id, category_id);
// let newData = {
// bannerInfo: data.bannerInfo,
// sortInfo: data.sortInfo,
// brandInfo: data.brandInfo,
// }
// console.log("chenlin", "parseCategoryBSubDetail处理后的JSON数据：" + JSON.stringify(data));
return {key: key, data: data};
return {key: key, data: json};
// return json;
// //女
// girl.map((item, i) => {
// let newGirlSub=[];
// let all={
// category_name: '全部'+item.category_name,
// parent_id: item.category_id,
// // parent_id: item.parent_id,
// relation_parameter:item.relation_parameter,
// node_count:item.node_count,
// };
// if(item.sub){
// newGirlSub=[all,...item.sub];
// }else{
// newGirlSub.push(all);
// }
// newGirl.push({
// sub:newGirlSub,
// category_name:item.category_name,
// category_id:item.category_id,
// parent_id:item.parent_id,
// relation_parameter:item.relation_parameter,
// sort_ico:item.sort_ico,
// node_count:item.node_count,
// });
// });
// //kid
// kids.map((item, i) => {
// let newKidsSub=[];
// let all={
// category_name: '全部'+item.category_name,
// parent_id: item.category_id,
// // parent_id: item.parent_id,
// relation_parameter:item.relation_parameter,
// node_count:item.node_count,
// };
// if(item.sub){
// newKidsSub=[all,...item.sub];
// }else{
// newKidsSub.push(all);
// }
// newKids.push({
// sub:newKidsSub,
// category_name:item.category_name,
// category_id:item.category_id,
// parent_id:item.parent_id,
// relation_parameter:item.relation_parameter,
// sort_ico:item.sort_ico,
// node_count:item.node_count,
// });
// });
// //家居
// lifestyle.map((item, i) => {
// let newLifestyleSub=[];
// let all={
// category_name: '全部'+item.category_name,
// parent_id: item.category_id,
// // parent_id: item.parent_id,
// relation_parameter:item.relation_parameter,
// node_count:item.node_count,
// };
// if(item.sub){
// newLifestyleSub=[all,...item.sub];
// }else{
// newLifestyleSub.push(all);
// }
// newLifestyle.push({
// sub:newLifestyleSub,
// category_name:item.category_name,
// category_id:item.category_id,
// parent_id:item.parent_id,
// relation_parameter:item.relation_parameter,
// sort_ico:item.sort_ico,
// node_count:item.node_count,
// });
// });
// return {
// boy:newBoy,
// girl:newGirl,
// kids:newKids,
// lifestyle:newLifestyle,
// };
}
... ...