Question

我正在创建一个服务器端呈现的React应用程序，该应用程序使用Redux并从Wordpress安装中获取内容（通过WP API）。请考虑以下减速机：

const initState = {
    mainMenu: null,
    userMenu: null
}

export default ( state = initState, action ) => {

    switch( action.type ) {

        case 'FETCH_MAIN_MENU':
            state = {
                ...state, 
                mainMenu: action.payload.data
            }           

        case 'FETCH_USER_MENU':
            state = {
                ...state, 
                userMenu: action.payload.data
            }                   

        default: 
            return state; 

    }

}

在第一次呈现应用程序之前，在服务器端调度这两个操作，并且这两个操作都是返回两个不同菜单的promise。问题是有时FETCH_USER_MENU的有效负载实际上与FETCH_MAIN_MENU的有效负载相同。据推测，当FETCH_USER_MENU发出的承诺解析得太慢时会发生这种情况，因此action.payload.data会在FETCH_MAIN_MENU案例中获取分配给它的值。我很确定这是正在发生的事情，因为如果我任意将action.payload.data设置为null，则根本不会呈现用户菜单（有时只是）：

const initState = {
    mainMenu: null,
    userMenu: null
}

export default ( state = initState, action ) => {

    switch( action.type ) {

        case 'FETCH_MAIN_MENU':
            state = {
                ...state, 
                mainMenu: action.payload.data
            }           

        action.payload.data = null; 

        case 'FETCH_USER_MENU':
            state = {
                ...state, 
                userMenu: action.payload.data // Sometimes results as null
            }                   

        default: 
            return state; 

    }

}

除了为每个菜单创建不同的减速器之外，您能否建议一个解决方案，我想避免哪些？

Answer 1

问题是由Switch case fallthrough引起的，因为你没有从case语句返回，也没有使用break 。理想情况下，使用redux，您需要返回更新的状态。你会写的

export default ( state = initState, action ) => {

    switch( action.type ) {

        case 'FETCH_MAIN_MENU':
            return {
                ...state, 
                mainMenu: action.payload.data
            }           

        case 'FETCH_USER_MENU':
            return  {
                ...state, 
                userMenu: action.payload.data
            }                   

        default: 
            return state; 

    }

}

动作负载正在使用两次（Redux）

1 个答案: