美文网首页React Native
React Native redux使用

React Native redux使用

作者: 游侠_6fb7 | 来源:发表于2020-04-15 16:09 被阅读0次
    总体结构

    server 文件夹名称
    ACTION.js 常量定义
    action.js 触发器
    api.js url定义
    httpServer.js 请求网络
    reducer.js 构建数据

    常量定义

    ACTION.js 代码

    export const GET_DEFALULT_RECOMEND = 'GET_DEFALULT_RECOMEND';
    export const CHECK_PRICE_PACKAGE = 'CHECK_PRICE_PACKAGE';
    export const GET_CHANGE_RESOURCE = 'GET_CHANGE_RESOURCE';
    export const CHANGE_RESOURCE_NUM = 'CHANGE_RESOURCE_NUM';
    export const DELETE_RESOURCE = 'DELETE_RESOURCE';
    export const FLUSH_FLIGHT_DETAIL = 'FLUSH_FLIGHT_DETAIL';
    export const RESET_FLIGHT_RESULT = 'RESET_FLIGHT_RESULT';
    export const SAVE_JOURNEY = 'SAVE_JOURNEY';
    export const GET_DEFAULT_RECOMMEND_WHEN_PEOPLE_UPDATE = 'GET_DEFAULT_RECOMMEND_WHEN_PEOPLE_UPDATE'
    
    触发器
    import * as ACTION from './ACTION';
    import * as server from './httpServer';
    
    let getDefaultRecommend = (params, callback, error) => {
        return dispatch => {
            server.getDefaultRecommend(params, (d) => {
                dispatch({
                    type: ACTION.GET_DEFALULT_RECOMEND,
                    error: false,
                    data: d.data
                });
                callback && typeof callback == 'function' && callback(d.data);
            }, (d) => {
                error && typeof error == 'function' && error(d);
                dispatch({
                    type: ACTION.GET_DEFALULT_RECOMEND,
                    error: true
                });
            })
        }
    };
    
    let getDefaultRecommendWhenPeopleUpdate = (params, callback, error) => {
        return dispatch => {
            server.getDefaultRecommendWhenPeopleUpdate(params, (d) => {
                dispatch({
                    type: ACTION.GET_DEFAULT_RECOMMEND_WHEN_PEOPLE_UPDATE,
                    error: false,
                    data: d.data
                });
                callback && typeof callback == 'function' && callback(d.data);
            }, (d) => {
                error && typeof error == 'function' && error(d);
                dispatch({
                    type: ACTION.GET_DEFAULT_RECOMMEND_WHEN_PEOPLE_UPDATE,
                    error: true
                });
            })
        }
    };
    
    /**
     * 更改资源,如果更换机票,更换酒店请求接口
     * @param params
     * @param callback
     * @param error
     * @returns {function()}
     */
    let getChangedResouces = (params, callback, error) => {
        return dispatch => {
            server.getChangedResouces(params, (d) => {
                callback && typeof callback == 'function' && callback(d.data);
                return dispatch({
                    type: ACTION.GET_CHANGE_RESOURCE,
                    error: false,
                    data: d.data
                });
            }, (d) => {
                error && typeof error == 'function' && error(d);
                return dispatch({
                    type: ACTION.GET_CHANGE_RESOURCE,
                    error: true
                });
            })
        }
    };
    /**
     * 保存购物车
     * @param params
     * @param callback
     * @param error
     * @returns {function()}
     */
    let saveJourney = (params, callback, error) => {
        return dispatch => {
            server.saveJourney(params, (d) => {
                callback && typeof callback == 'function' && callback(d.data);
                return dispatch({
                    type: ACTION.SAVE_JOURNEY,
                    error: false,
                    data: d.data
                });
            }, (d) => {
                error && typeof error == 'function' && error(d);
                return dispatch({
                    type: ACTION.SAVE_JOURNEY,
                    error: true
                });
            })
        }
    };
    /**
     * 验价接口
     * @param params 验价传入服务端参数
     * @param source 验价接口原始数据
     * @param dData 默认推荐数据
     * @param callback
     * @param error
     * @returns {function()}
     */
    let checkPricePackage = (params, source,dData, callback, error) => {
        return dispatch => {
            server.checkPricePackage(params, (d) => {
                if(!!d && !!d.data && d.data.handleType == 1 && !!source){
                    let temp = Object.assign(source, {});
                    temp.failedDesc = d.data.failedDesc;
                    temp.allSuccess = d.data.allSuccess;
                    d.data = temp;
                }
                //handleType 为2时,验价才会有优惠信息
                if (!!d && !!d.data && !!dData && d.data.handleType == 2) {
                    let result = d.data;
                    if (!!result.promotions) {
                        //优惠提示更改
                        dData.promotions = result.promotions;
                    }else{
                        dData.promotions = [];
                    }
                    if (!!dData.journeyInfo) {
                        let temp = Object.assign(dData.journeyInfo, {});//生成新的对象地址,刷新数据
                        //机票十分钟刷新,提示更改
                        if(!!result.journeyNotice){
                            temp.journeyNotice = result.journeyNotice;
                        }
                        //机票十分钟刷新,优惠信息更改
                        if (!!result.promotionTips && result.promotionTips.length > 0) {
                            temp.promotionTips = result.promotionTips;
                        }else{
                            temp.promotionTips = [];
                        }
                        dData.journeyInfo = temp;
                    }
                }
                 dispatch({
                    type: ACTION.CHECK_PRICE_PACKAGE,
                    data: d.data
                });
                callback && typeof callback == 'function' && callback(d.data);
            }, (d) => {
                error && typeof error == 'function' && error(d);
                return dispatch({
                 type: ACTION.CHECK_PRICE_PACKAGE
                 //data: pack
                 });
                //end
            })
        }
    };
    
    /**
     * 修改酒店房间数
     * @param params
     * @param callback
     * @param error
     * @returns {function()}
     */
    let changeResourceNumber = (params, callback, error) => {
        return dispatch => {
            server.changeResourceNumber(params, (d) => {
                callback && typeof callback == 'function' && callback(d);
                return dispatch({
                    type: ACTION.CHANGE_RESOURCE_NUM,
                    data: d.data,
                    error: false
                });
            }, (d) => {
                error && typeof error == 'function' && error(d);
                return dispatch({
                    type: ACTION.CHANGE_RESOURCE_NUM,
                    error: true
                })
            })
        }
    };
    
    /**
     * 机票十分钟刷新接口
     * @param params
     * @param callback
     * @param error
     * @returns {function()}
     */
    let flushFlightDetails = (params, data, callback, error) => {
        return dispatch => {
            server.flushFlightDetails(params, (d) => {
                //十分中刷新替换数据
                let result = d.data;
                if (!result) {
                    //返回数据为空
                    dispatch({
                        type: ACTION.FLUSH_FLIGHT_DETAIL,
                        flightResult: {},
                        data: {}
                    });
                } else {
                    data.flightList = result.flightList;
                    data.promotions = result.promotions;
                    data.lackFlag = result.lackFlag;
                    if (!!data.journeyInfo) {
                        //机票十分钟刷新,提示更改
                        data.journeyInfo.journeyNotice = result.journeyNotice;
                        //机票十分钟刷新,优惠信息更改
                        if (!!result.promotionTips && result.promotionTips.length > 0) {
                            data.journeyInfo.promotionTips = result.promotionTips;
                        }else{
                            data.journeyInfo.promotionTips = [];
                        }
                    }
                    data.lackDesc = result.lackDesc;
                    dispatch({
                        type: ACTION.FLUSH_FLIGHT_DETAIL,
                        flightResult: result.flightResultMap,
                        data: data
                    });
                }
                callback && typeof callback == 'function' && callback(result);
            }, (d) => {
                error && typeof error == 'function' && error(d);
                return dispatch({
                    type: ACTION.FLUSH_FLIGHT_DETAIL,
                    data: data
                });
            })
        }
    };
    
    /**
     * 删除酒店资源
     * @param params
     * @param callback
     * @param error
     * @returns {function()}
     */
    let deleteResouce = (params, callBack, error) => {
        return dispatch => {
            server.deleteResouce(params, (d) => {
                callBack && typeof callBack == 'function' && callBack(d);
                return dispatch({
                    type: ACTION.DELETE_RESOURCE,
                    data: d.data,
                    error: false
                });
            }, (d) => {
                error && typeof error == 'function' && error(d);
                return dispatch({
                    type: ACTION.DELETE_RESOURCE,
                    error: true
                })
            })
        }
    };
    
    /**
     * 还机票验仓验价数据原数据
     */
    let resetInvalidFt = ()=> {
        return dispatch => {
            return dispatch({
                type: ACTION.RESET_FLIGHT_RESULT,
                flightResult: {}
            });
        }
    };
    
    export {
        getDefaultRecommend,
        checkPricePackage,
        getChangedResouces,
        saveJourney,
        changeResourceNumber,
        deleteResouce,
        flushFlightDetails,
        resetInvalidFt,
        getDefaultRecommendWhenPeopleUpdate
    };
    
    URL定义

    api.js

    /**
     * Created by WangJun11 on 2019/3/27.
     */
    
    import {
        Platform
    } from 'react-native';
    
    let https = 'https://';
    let http = 'http://';
    let apiHost = 'xxx.xxx.com';
    let mHost = 'xxx.xxx.com';
    if (Platform.OS == 'android') {
        apiHost = 'xxx.xxx.com';
        mHost = 'xxx.xxx.com';
    }
    
    
    export default {
        // 默认资源推荐接口
        getDefaultRecommend: '/res/pack/getDefaultRecommend/app',
        // 更换资源推荐接口
        getChangedResouces: http + apiHost + '/res/pack/getChangedResouces/app',
        // 验价接口
        checkPricePackage: '/res/pack/checkPriceAndPackage/app',
        //更改酒店房间数
        changeResourceNumber: http + apiHost + '/res/pack/changeResourceNumber/app',
        //删除酒店资源
        deleteResouce: http + apiHost + '/res/pack/deleteResouce/app',
        //十分钟刷新接口
        flushFlightDetails: '/res/pack/flushFlightDetails/app',
        //保存购物车
        saveJourney: '/res/pack/saveSavedJourneyForMulti/app',
        //人数改变是调的资源推荐接口
        getDefaultRecommendWhenPeopleUpdate: '/res/pack/changeTravellersNumber/app'
    };
    
    请求网络
    /**
     * Created by
     */
    import api from './api';
    let {ajax} = tnGlobal.utils;
    /*
     *购物车推荐接口
     */
    const getDefaultRecommend = (params, success, error) => {
        ajax({
            url: {
                relativeUrl: api.getDefaultRecommend,
                timeout: 40000,
                isNewSchema: true,
                host: 1
            },
            data: params,
            success: success,
            error: error
        });
    };
    
    
    /*
     *人数改变时调的推荐接口
     */
    const getDefaultRecommendWhenPeopleUpdate = (params, success, error) => {
        ajax({
            url: {
                relativeUrl: api.getDefaultRecommendWhenPeopleUpdate,
                timeout: 40000,
                isNewSchema: true,
                host: 1
            },
            data: params,
            success: success,
            error: error
        });
    };
    
    const getChangedResouces = (params, success, error)=> {
        ajax({
            url: api.getChangedResouces,
            data: params,
            success: success,
            error: error
        });
    };
    
    /**
     *保存购物车接口 
     * @param params
     * @param success
     * @param error
     */
    const saveJourney = (params, success, error)=> {
        ajax({
            url: {
                relativeUrl: api.saveJourney,
                timeout: 40000,
                isNewSchema: true,
                host: 1
            },
            data: params,
            success: success,
            error: error
        });
    };
    
    /**
     *验价接口 
     * @param params
     * @param success
     * @param error
     */
    const checkPricePackage = (params, success, error)=> {
        ajax({
            url: {
                relativeUrl: api.checkPricePackage,
                timeout: 40000,
                isNewSchema: true,
                host: 1
            },
            data: params,
            success: success,
            error: error
        });
    };
    
    /**
     * 修改房间数
     * @param params
     * @param success
     * @param error
     */
    const changeResourceNumber = (params, success, error)=> {
        ajax({
            url: api.changeResourceNumber,
            data: params,
            success: success,
            error: error
        });
    };
    
    /**
     * 删除酒店资源
     * @param params
     * @param success
     * @param error
     */
    const deleteResouce = (params, success, error)=> {
        ajax({
            url: api.deleteResouce,
            data: params,
            success: success,
            error: error
        });
    };
    /*
     *机票十分钟刷新接口
     */
    const flushFlightDetails = (params, success, error)=> {
        ajax({
            url: {
                relativeUrl: api.flushFlightDetails,
                timeout: 40000,
                isNewSchema: true,
                host: 1
            },
            data: params,
            success: success,
            error: error
        });
    };
    
    export {
        getDefaultRecommend,
        checkPricePackage,
        getChangedResouces,
        changeResourceNumber,
        deleteResouce,
        flushFlightDetails,
        saveJourney,
        getDefaultRecommendWhenPeopleUpdate
    }
    
    
    构建数据
    /**
     * Created by
     */
    
    import * as ACTION from './ACTION';
    /**
     * 初始化数据
     * @type {{data: {}}}
     */
    let initial = {
        // 全局数据
        dataTest: {
            pageName: '初始化数据'
        }
    };
    /**
     * 分发数据
     * @param state
     * @param action
     * @returns {*}
     */
    export default function items(state = initial, action) {
        switch (action.type) {
            case ACTION.GET_DEFALULT_RECOMEND:
                return {
                    ...state,
                    data: action.data,
                    error: action.error,
                    pricePackage: {},//还原验价数据
                    flightResult:{}//还原十分钟刷新数据
                };
                break;
            case ACTION.GET_DEFAULT_RECOMMEND_WHEN_PEOPLE_UPDATE:
                return {
                    ...state,
                    data: action.data,
                    error: action.error,
                    pricePackage: {},//还原验价数据
                    flightResult:{}//还原十分钟刷新数据
                };
                break;
            case ACTION.CHECK_PRICE_PACKAGE:
                return {
                    ...state,
                    pricePackage: action.data
                };
                break;
            case ACTION.GET_CHANGE_RESOURCE:
                return {
                    ...state,
                    data: action.data,
                    error: action.error,
                    pricePackage: {},//还原验价数据
                    flightResult:{}//还原十分钟刷新数据
                };
                break;
            case ACTION.CHANGE_RESOURCE_NUM:
                return {
                    ...state,
                    data: action.data,
                    error: action.error
                };
                break;
            case ACTION.DELETE_RESOURCE:
                return {
                    ...state,
                    data: action.data,
                    error: action.error
                };
                break;
            case ACTION.FLUSH_FLIGHT_DETAIL:
                return {
                    ...state,
                    flightResult: action.flightResult,
                    data: action.data,
                    pricePackage: {}//还原验价数据
                };
                break;
            case ACTION.RESET_FLIGHT_RESULT:
                return {
                    ...state,
                    flightResult: action.flightResult
                };
                break;
            case ACTION.SAVE_JOURNEY:
                return {
                    ...state,
                    saveStatusData: action.data,
                };
            break;
            default:
                return state;
        }
    }
    
    页面入口
    /**
     * Created by WangJun11 on 2019/3/28.
     */
    import React from 'react';
    
    // bridge
    import bridge from '@tuniu/rn-bridge';
    
    import {createStore, applyMiddleware} from 'redux';
    import {Provider} from 'react-redux';
    import thunk from 'redux-thunk';
    import reducer from './shop/server/reducer';
    
    import PlaneHotelShop from './shop/PlaneHotelShop';
    
    let dateUtils = tnGlobal.dateUtils;
    class ShopProvider extends TNBase.Component {
        constructor(props) {
            super(props);
    
            this.setPageName();
        }
    
        setPageName() {
    }
        render() {
            const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
            const store = createStoreWithMiddleware(reducer);
    
            return (
                <Provider store={ store }>
                    <PlaneHotelShop {...this.props}/>
                </Provider>
            )
    
        }
    }
    
    
    module.exports = ShopProvider;
    
    
    页面使用

    PlaneHotelShop.js

    import React from 'react'
    import _ from 'lodash'
    
    let {
        View,
        Text,
        ScrollView,
        StyleSheet,
        DeviceEventEmitter,
        Platform,
        Image,
        TouchableOpacity,
        Modal,
        TouchableWithoutFeedback
    } = TNBase;
    import * as actions from './server/actions';
    import {bindActionCreators} from 'redux';
    import {connect} from 'react-redux';
    
    class PlaneHotelShop extends TNBase.Component {
        // 构造
        constructor(props) {
            super(props);
            this.state = {
            };
        
        }
    
    
        componentWillMount() {
            //监听选择人数发生变更的方法
            this.checkInInfoListener = bridge.addEventEmitterListener('TNReactNativePlaneHotelCheckInUpdateNotification', (d)=> {
                //出游人选择页,清除定时器
            });
        }
    
        componentWillUnmount() {
            //卸载移除监听
            this.checkInInfoListener && bridge.removeEventEmitterListener(this.checkInInfoListener);
        }
    
        /**
         * 获取标题
         * @param journeyInfo
         */
        getTitle(journeyInfo){
            let data = this.props.data;
            if(!!data && !!journeyInfo){
                if(data.hasFlight || data.hasTrain){
                    //有机票,标题
                    return journeyInfo.departCityName + '-' + journeyInfo.destCityName + '自由行';
                }else{
                    //无机票
                    return journeyInfo.destCityName + '自由行';
                }
            }else{
                return this.title;
            }
        }
    
    
        render() {
            return (
                <View style={{flex: 1,backgroundColor:'#f2f2f2'}}>
                    <Header renderTitle={this.renderTitle.bind(this,headTitle)}
                            leftClick={() => {
                                bridge.setLogEvent({'eventName': '点击_标题栏____返回'}, ()=>{});
                                bridge.setLinkBack(null,function(d){});
                            }}
                            renderRight={this.renderRight.bind(this)}/>
                </View>
            );
        }
    
        /**
         * 卡片添加酒店
         */
        addHotelCard(params){
            if (!!params) {
                this.refs.ResourcesModal.changeVisible(true,params)
            }
        }
    
        // 顶部nav bar右边更多按钮
        renderRight() {
            return (
                <View style={styles.serviceBg}>
                    
                </View> )
        }
    
        reloadDefault() {
            this.setState({
                loading: true
            });
            this.getDefaultRecommend();
        }
    
        /**
         * 获取是单程还是往返
         */
        getJournryType() {
            if (!!this.props.data && !!this.props.data.journeyInfo && !!this.props.data.journeyInfo.journeyType) {
                return this.props.data.journeyInfo.journeyType;
            } else {
                return this.props.journeyType;
            }
        }
    
        /**
         * 默认资源推荐接口
         */
        getDefaultRecommend(needRecommendProductId = true) {
            let that = this;
            if (!!this.bookCityCode && !!this.orderCityName) {
                that.requestRecommd(needRecommendProductId);
            } else {
                bridge.getGPS({}, (city = {}) => {
                    let data = city.data || {};
                    this.bookCityCode = +(data.orderCityCode || 2500);
                    this.orderCityName = data.orderCityName || '上海';
                    that.requestRecommd(needRecommendProductId);
                });
            }
        };
    
        //当人数改变时的更新接口
        refreshWhenPeopleUpdate(){
            let that = this;
            if (!!this.bookCityCode && !!this.orderCityName) {
                that.requestWhenPeopleUpdate();
            } else {
                bridge.getGPS({}, (city = {}) => {
                    let data = city.data || {};
                    this.bookCityCode = +(data.orderCityCode || 2500);
                    this.orderCityName = data.orderCityName || '上海';
                    that.requestWhenPeopleUpdate();
                });
            }
        }
    
        /**
         * 当人数改变时的更新接口请求默认推荐
         */
        requestWhenPeopleUpdate() {
            let that = this;
            //sessionId自动加上
            this.props.actions.getDefaultRecommendWhenPeopleUpdate({
                packType: this.packType,
                bookCityCode: this.bookCityCode, //int,必传,预定城市id
                bookCityName: this.orderCityName || '上海', //String,必传,预定城市名称
                departCityCode: +this.state.departcity.cityCode, //int,必传,出发城市id
                departCityName: this.state.departcity.cityName, //String,必传,出发城市名称
                departDate: this.state.date.startDate, //String,必传,出发日期
                adultNum: +this.state.people.adultNum, //int,必传,成人数
                childNum: +this.state.people.childrenNum, //int,必传,儿童数
                childAges: this.state.people.childAges, //array,儿童年龄
                journeyType: this.getJournryType() || 2, //int,必传,行程类型:2往返,1单程 默认往返
                journeyList: [ //行程
                    {
                        cabinType: +this.state.info.cabinType, //int,必传,舱等大类 1.经济舱 2.公务舱 3.头等舱
                        startCityCode: +this.state.departcity.cityCode, //出发城市code
                        startCityName: this.state.departcity.cityName, //出发城市名称
                        startCityIataCode: this.state.departcity.cityIataCode,  //出发地城市三字码
                        destCityCode: +this.state.destcity.cityCode, //目的地城市code
                        destCityName: this.state.destcity.cityName, //目的地城市名称
                        destCityIataCode: this.state.destcity.cityIataCode,   //目的地城市三字码
                        journeyDepartDate: this.state.date.startDate, //行程出发时间
                        journeyEndDate: this.state.date.endDate, //行程结束时间
                        trainType: this.trainType //火车票类型 1 高铁 动车  0 全部车次
                    }
                ],
                recommendProductId:this.recommendProductId   //系统打包的产品ID
            }, (d)=> {
                //无需主动调用state data
                that.setState({
                    loading: false
                });
                that.resetTimer();
            }, (error)=> {
                //无需主动调用state data
                that.setState({
                    loading: false
                });
                that.resetTimer();
            });
        }
    
    
        /**
         * 请求默认推荐
         * @param needRecommendProductId
         */
        requestRecommd(needRecommendProductId = true) {
            let that = this;
            //sessionId自动加上
            this.props.actions.getDefaultRecommend({
                }, (d)=> {
                //无需主动调用state data
                that.setState({
                    loading: false
                });
                that.resetTimer();
            }, (error)=> {
                //无需主动调用state data
                that.setState({
                    loading: false
                });
                that.resetTimer();
            });
        }
    
        /**
         * 修改酒店房间数
         */
        changeResourceNumber(params) {
            let that = this;
            this.setState({
                priceShow: false,
                loading: true
            });
            if(!!params){
                params.packType = this.packType;
            }
            this.props.actions.changeResourceNumber(params, (d) => {
                that.setState({
                    loading: false
                });
            }, (error) => {
                that.setState({
                    loading: false
                });
            });
        };
    
        /**
         * 删除酒店资源
         */
        deleteResource(params) {
            if(!params || !params.deleteResourceList || params.deleteResourceList.length == 0){
                return;
            }
            let that = this;
            this.setState({
                flightShow: false,
                priceShow: false,
                loading: true
            });
            this.props.actions.deleteResouce(params, (d) => {
                that.setState({
                    loading: false
                });
            }, (error) => {
                that.setState({
                    loading: false
                });
            });
        }
    }
    const styles = StyleSheet.create({
        scrollView: {
            flex: 1
        },
        right: {
            width: 21,
            marginRight: 18,
            fontSize: 10,
            color: '#383838',
            fontFamily: 'PingFang-SC-Medium'
        }
    });
    
    
    let dumbComponent = connect(state => ({
        data: state.data,
        pricePackage: state.pricePackage,
        error: state.error,
        flushFlight: state.flightResult,
        saveStatusData: state.saveStatusData
    }), dispatch => ({
        actions: bindActionCreators(actions, dispatch)
    }))(PlaneHotelShop);
    module.exports = dumbComponent;
    
    

    相关文章

      网友评论

        本文标题:React Native redux使用

        本文链接:https://www.haomeiwen.com/subject/zabcvhtx.html