ASP.NET Core+React集成Redux开发登录时action creator报错如何解决

报错原因 #

该报错是JavaScript自动分号插入（ASI）规则导致的。你写的action creator中return单独占了一行，JS会自动在return后插入分号，相当于直接返回undefined，后面的对象字面量就成了没有被赋值、也没有被调用的无效表达式，正好命中no-unused-expressions的校验规则。

修复方案 #

1. 修正action creator写法

两种可选写法都可以解决换行导致的自动分号插入问题：

• 显式返回写法，将对象左括号和return放在同一行：

export const loginAction = (userName, realName) => {
    return {
        type: "LOG_IN_USER",
        userName,
        realName
    }
}

• 更简洁的箭头函数隐式返回写法，用括号包裹对象避免换行歧义：

export const loginAction = (userName, realName) => ({
    type: "LOG_IN_USER",
    userName,
    realName
})

2. 修复隐藏的字段不匹配问题

你当前的代码还有一个隐性bug：action里传递的用户真实姓名字段是realName，但reducer里取值用的是action.fullName，会导致存入store的fullName永远是undefined，需要统一字段名，修改reducer对应部分即可：

case "LOG_IN_USER": {
    return {
        ...state,
        userName: action.userName,
        fullName: action.realName // 修正字段名和action入参对应
    }
}

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