Redux应用未渲染组件就报Cannot read 'type' of undefined错误如何解决？

问题根因 #

你的manageBattle reducer 参数顺序写反了，这是Redux reducer最常见的低级错误之一。
Redux要求所有reducer的函数签名固定为(state, action) => newState，第一个参数是当前状态，第二个参数才是传入的action。你现在把action放在第一个参数位，state放在第二个，Redux初始化调用reducer时会给第一个参数传undefined（触发你设置的默认state）、第二个参数传Redux内置的初始化action，就会导致你函数内拿到的action变量是undefined，走到switch(action.type)时自然就会抛出属性读取错误。
而且Redux初始化reducer的时机远早于组件渲染，所以你的App组件的render方法根本没有机会执行，符合你观察到的现象。

修复方法 #

直接调整manageBattle的参数顺序即可：

// 调整前的错误写法（action在前）
// function manageBattle(
//    action,
//    state={ ... 你的默认state ... }
// ){

// 调整后的正确写法
function manageBattle(
    state={
        // 你原来的默认state代码原封不动保留
        figures:{
            user: {
                is_user: true,
                name: "",
                class_type: null,
                id: null,
                hp: 0,
                type: null,
                level: 0,
                status: "none",
                spd: 0,
                atk: 0,
                def: 0,
                sAtk: 0,
                sDef: 0,
                tEffected: 0,
                image: "N/A",
                moves: [null]
            },
            opp: {
                is_user: false,
                name: "",
                class_type: null,
                id: null,
                hp: 0,
                type: null,
                level: 0,
                status: "none",
                spd: 0,
                atk: 0,
                def: 0,
                sAtk: 0,
                sDef: 0,
                tEffected: 0,
                image: "N/A",
                moves: [null]
            }
        },
        battle_details: {
            turns: 0,
            whoseTurn_id: null,
            this_move_target_id: null,
            prompt: "Welcome"
        }
    },
    action
){
    // 原有逻辑代码原封不动保留
    if (!action){
        console.log("Action is nil")
    }
    switch (action.type) {
        case 'NEW_BATTLE':
        // 请求新战斗的JSON数据

        case 'CHANGE_USER_HP':
            let effect = action.effect
            let newUserState = applyingStatusEffectandDamage(state, action.amount, effect)
            return {newUserState}

        case 'CHANGE_OPP_HP':
            effect = action.effect
            let newOppState = applyingStatusEffectandDamage(state, action.amount, effect)
            return {newOppState}

        case 'COMPLETE_BATTLE':
            // 修改提示语、重置用户生命值、升级
        default:
            return state;
    }
}

其他需要注意的潜在问题 #

• 你当前的NEW_BATTLE、COMPLETE_BATTLE分支没有写返回值，会直接落到default分支，不符合业务预期，需要补全对应逻辑的返回值。
• CHANGE_USER_HP、CHANGE_OPP_HP分支你直接返回了{newUserState}这类对象，会直接覆盖整个battle reducer的state结构，丢失其他属性，建议改为浅拷贝原有state再覆盖对应字段：return {...state, ...newUserState}，可根据你的实际数据结构调整。

内容的提问来源于stack exchange，提问作者user15217186