React-Native-Redux网络与createMaterialTopTabNavigator使用

假如使用Redux与createMaterialTopTabNavigator实现如下图所示功能，将会使你更加熟练使用redux

Redux-NavigationBar.png

action

为了更好地进行代码维护，action与type统一管理

/**
 * @author: tongle
 *
 * @time: 2020-07-15 12:25:46
 *
 * @description: 未使用，已使用，已过期
 *
 * @function:
 *
*/

import {requestIntegralPackageList, requestCodeCovertIntegral} from "../../../api/Ticket";
import UIUtils from "../../../utils/UIUtils";

export const FETCH_I_REQUEST = "FETCH_I_REQUEST";
export const FETCH_I_SUCCESS = "FETCH_I_SUCCESS";
export const FETCH_I_ERROR = "FETCH_I_ERROR";
export const FETCH_I_NEXT_SUCCESS = "FETCH_I_NEXT_SUCCESS";
export const CONVERT_I_SUCCESS = "CONVERT_I_SUCCESS";
export const CONVERT_I_ERROR = "CONVERT_I_ERROR";
export const S_I_FILTER = "S_I_FILTER";

export const integralVisibilityFilters = {
    UNUSED:'未使用',
    USED: '已使用',
    EXPIRED: '已过期'
}

function fetchDataRequest() {
    return {
        type: FETCH_I_REQUEST
    };
}

function fetchDataSuccess(item) {
    return {
        type: FETCH_I_SUCCESS,
        item
    };
}

function fetchDataNextSuccess(item) {
    return {
        type: FETCH_I_NEXT_SUCCESS,
        item
    };
}

function convertTicketSuccess(item) {
    return {
        type: CONVERT_I_SUCCESS,
        item
    };
}
function convertTicketError() {
    return {
        type: CONVERT_I_ERROR,
    };
}


function fetchDataError(error) {
    return {
        type: FETCH_I_ERROR,
        payload: { error }
    };
}

export function setIntegralVisibilityFilter(filter) {
    return {
        type: S_I_FILTER,
        payload: {
            filter
        }
    }
}


export function fetchIntegralProducts(pageIndex,pageSize,states) {
    return dispatch => {
        UIUtils.showLoadDialog()
        dispatch(fetchDataRequest());
        requestIntegralPackageList(pageIndex,pageSize,states).then(result =>{
            if (pageIndex === 1){
                dispatch(fetchDataSuccess(result.data))
            }else {
                dispatch(fetchDataNextSuccess(result.data))
            }
            UIUtils.dismissLoadDialog()
        }).catch(error => {
            UIUtils.dismissLoadDialog()
            dispatch(fetchDataError(error))
        })
    }
}

export function convertIntegralCode(code) {
    return dispatch =>{
        dispatch(fetchDataRequest())
        requestCodeCovertIntegral(code).then(result => {
            if (result.code === '0000'){
                dispatch(convertTicketSuccess(result.data))
                UIUtils.showToast('兑换成功')
            } else {
                dispatch(convertTicketError())
                UIUtils.showToast(result.msg)
            }
        }).catch(error => {
            UIUtils.showToast(error)
            dispatch(convertTicketError())
        })
    }
}

redux

生成一个redux，可以更好的管理数据，请求，下一页，兑换成功使用的是同一个item

/**
 * @author: tongle
 *
 * @time: 2020-07-15 12:26:19
 *
 * @description: 获取edux
 *
 * @function:  获取、下拉加载更多、兑换
 *
*/

let initialState = {
    loading: false,
    item: {
        unusedNum: 0,
        list:[],
    },
    error: null
};

export default function integralFetchRedux(state = initialState, action) {
    switch (action.type) {
        case "FETCH_I_REQUEST":
            return {
                ...state,
                loading: true,
                error: null
            };
        case "FETCH_I_SUCCESS":
            return {
                ...state,
                loading: false,
                item: action.item
            };
        case "FETCH_I_ERROR":
            return {
                ...state,
                loading: false,
                error: action.payload.error,
            };
        case "FETCH_I_NEXT_SUCCESS":
            action.item.list = state.item.list.concat(action.item.list)
            return {
                ...state,
                loading: false,
                item: action.item,
            }
        case "CONVERT_I_SUCCESS":
            state.item.list = [action.item, ...state.item.list]
            return {
                ...state,
                loading: false,
                item: state.item
            }
        case "CONVERT_I_ERROR":
            return {
                ...state,
                loading: false,
            };
        default:
            return state;
    }
}

combineRedux

combine所有redux绑定到store上

/**
 * @author: tongle
 *
 * @time: 2020-07-15 12:27:49
 *
 * @description: combine所有redux绑定到store上
 *
 * @function: redux直接不通信，通过store获取combineReducers下的数据
 *
*/


import integralFetchRedux from "./integralFetchRedux";
import integralHeadRedux from "./integralHeadRedux";
import {combineReducers} from "redux";

export default combineReducers({
   integralFetchRedux,
   integralHeadRedux,
})

content组件

通过mapStateToProps获取数据，更新render，

通过mapDispatchToProps刷新数据

const mapStateToProps = state => ({
    item: state.integralFetchRedux.item,
    status: state.integralHeadRedux,
    error: state.integralFetchRedux.error,
    pageNo: state.integralFetchRedux.pageNo,
    loading: state.integralFetchRedux.loading,
})

const mapDispatchToProps = dispatch =>({
    requestData:(pageNo,pageSize,status) => dispatch(fetchIntegralProducts(pageNo,pageSize,status)),
    convertIntegralCode:(code) => dispatch(convertIntegralCode(code))
})

export default connect(mapStateToProps, mapDispatchToProps)(TicketPackageIntegral)

head组件

点击切换未使用，已使用，已过期，并获取数据

const mapStateToProps = state => ({
    activeFilter: state.integralHeadRedux,
})

//value 有参数时
const mapDispatchToProps = dispatch => ({
    setFilterType: (value) => dispatch(setIntegralVisibilityFilter(value)),
    requestData: (pageNo, pageSize, status) => dispatch(fetchIntegralProducts(pageNo, pageSize, status)),
})

export default connect(mapStateToProps, mapDispatchToProps)(TicketPackageIntegralHead)

page组件

用于createMaterialTopTabNavigator数据展示，如果没有，可以不展示

const mapStateToProps = state => ({
    error: state.fetchRedux.error,
    unusedNum: state.fetchRedux.item ? state.fetchRedux.item.unusedNum : 0,
    isUsed: state.usedRedux.isUsed,
    integralNum: state.integralFetchRedux.item ? state.integralFetchRedux.item.unusedNum : 0
})

export default connect(mapStateToProps)(TicketPackage)