欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

9.3收藏功能的实战1

程序员文章站 2024-03-22 09:19:40
...
action>popular>index.js
修改 onLoadPopularData 增加参数 favoriteDao
修改 handleData增加参数 favoriteDao
进而需要修改
import { handleData, _projectModels} from '../ActionUtil'

import { handleData, _projectModels} from ‘…/ActionUtil’
export function onLoadPopularData(storeName, url, pageSize, favoriteDao){

handleData(Types.POPULAR_lOAD_SUCCESS, dispatch, storeName, data, pageSize, favoriteDao);

}

export function onLoadMorePopular(storeName, pageIndex, pageSize, dataArray = [], favoriteDao, callBack) {
//只展示修改代码
//本次和载入的最大数量
let max = pageSize * pageIndex > dataArray.length ? dataArray.length : pageSize * pageIndex;
//把projectModels数据 包装一个收藏状态
_projectModels(dataArray.slice(0, max),favoriteDao,data=>{
dispatch({
type: Types.POPULAR_LOAD_MORE_SUCCESS,
storeName,
pageIndex,
projectModels: data,
})
})
}

ActionUtil.js
文件功能描述:
触发popularPage/trendingPage页面的初始化数据请求成功的dispatch,把projectModels展示数据包装成了如下格式
>  this.item = item; //要展示的数据
    this.isFavorite = isFavorite;

做的改变:handleData增加一个参数favoriteDao主要就是去给需要展示的数据加一个isFavorite 状态

export function handleData(actionType, dispatch, storeName, data, pageSize, favoriteDao,params) {

//第一次要加载的数据
let showItems = pageSize > fixItems.length ? fixItems : fixItems.slice(0, pageSize);
_projectModels(showItems,favoriteDao,projectModels=>{
    dispatch({
        type: actionType,
        items: fixItems,
        projectModels:projectModels,
        storeName,
        pageIndex: 1,
        ...params
    })
});

}
/**

  • 通过本地的收藏状态包装Item
  • @param showItems
  • @param favoriteDao
  • @param callback
  • @returns {Promise}
  • @private
    /
    export async function _projectModels(showItems, favoriteDao, callback) {
    let keys = [];
    try {
    // 通过favoriteDao.getFavoriteKeys获取收藏的key
    keys = await favoriteDao.getFavoriteKeys();
    } catch (e) {
    console.log(e);
    }
    let projectModels = [];
    for (let i = 0, len = showItems.length; i < len; i++) {
    //checkFavorite 根据收藏的Key去匹配展示的Item,如果有,说明已收藏,否者,未收藏
    //projectModels是个对象???
    projectModels.push(new ProjectModel(showItems[i], Utils.checkFavorite(showItems[i], keys)));
    }
    doCallBack(callback,projectModels);
    }
    export const doCallBack = (callBack, object) => {
    if (typeof callBack === ‘function’) {
    callBack(object);
    }
    };
    import ProjectModel from “…/model/ProjectModel”;
    /
    *
  • 带收藏状态的item
  • @param item
  • @param isFavorite
  • @constructor
    */
    export default function ProjectModel(item, isFavorite) {
    this.item = item;
    this.isFavorite = isFavorite;
    }
BaseItem.js

static propTypes = {
projectModel: PropTypes.object,
onSelect: PropTypes.func,
onFavorite: PropTypes.func,
};

由于action里面的函数都发生了变法因为所调用函数的页面也需要做相应的处理
popularPage.js

import FavoriteDao from “…/expand/dao/FavoriteDao”;
import {FLAG_STORAGE} from “…/expand/dao/DataStore”;
import FavoriteUtil from “…/util/FavoriteUtil”;
const favoriteDao = new FavoriteDao(FLAG_STORAGE.flag_popular);

//都增加一个参数
const mapDispatchToProps = dispatch => ({
onLoadPopularData: (storeName, url, pageSize, favoriteDao) => dispatch(actions.onLoadPopularData(storeName, url, pageSize, favoriteDao)),
onLoadMorePopular: (storeName, pageIndex, pageSize, items, favoriteDao, callBack) =>
dispatch(actions.onLoadMorePopular(storeName, pageIndex, pageSize, items, favoriteDao, callBack))
})
//设置key 的时候 数据已经变了
keyExtractor={item => “” + item.item.id}//key值变化了

renderItem(data) {
const item = data.item;
return <PopularItem
projectModel={item}
onSelect={() => {
NavigationUtil.goPage({
projectModel: item,
}, ‘DetailPage’)
// this.props.navigation.navigate(‘tab1’);//跳转到createMaterialTopTabNavigator中的指定tab,主要这个navigation一定要是在跳转到createMaterialTopTabNavigator中的指页面获取的
}}
//onFavorite函数很多页面都可以用到所以单独提取出来了
//flag用于标识来自trendingPage模块还是popularPage模块
//flag用于key的生成
//这个函数用于回调更改每个Item的收藏状态
onFavorite={(item, isFavorite) => FavoriteUtil.onFavorite(favoriteDao, item, isFavorite, FLAG_STORAGE.flag_popular)}
/>
}
//增加一个参数
if (loadMore) {
onLoadMorePopular(this.storeName, pageIndex, pageSize, store.items, favoriteDao, callback => {
this.refs.toast.show(‘没有更多了’);
})
} else {

        onLoadPopularData(this.storeName, url, pageSize, favoriteDao)
    }
相关标签: 前端