javascript - 操作有效负载被使用两次 (Redux)

Question

我正在创建一个服务器端渲染的 React 应用程序，该应用程序使用 Redux 并从 Wordpress 安装中获取内容(通过 WP API)。请考虑以下 reducer :

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; 

    }

}

这两个操作都是在第一次呈现应用程序之前在服务器端分派(dispatch)的，并且这两个操作都是返回两个不同菜单的 promise 。问题在于，有时 FETCH_USER_MENU 的有效负载实际上与 FETCH_MAIN_MENU 的有效负载相同。据推测，当 FETCH_USER_MENU 发出的 Promise 解析速度太慢时，就会发生这种情况，因此 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; 

    }

}

除了为每个菜单创建不同的 reducer (我想避免这种情况)之外，您还能建议一个解决方案吗？

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; 

    }

}