Redux dispatch触发Unexpected token错误：action缺失type属性

嘿，我之前也踩过这个坑！你遇到的Unexpected token错误，本质原因是你的Redux action对象遗漏了必填的type属性——这是Redux的核心规则：每个action必须包含type字段，用来告知reducer需要执行哪种状态更新操作。

错误示例还原 #

我猜你的mapDispatchToProps大概是类似这样的写法（遗漏了type）：

import React from 'react';
import { connect } from 'react-redux';
import { Button } from 'semantic-ui-react';
import './App.css';

// 错误：dispatch的action没有type属性
const mapDispatchToProps = dispatch => ({
  toggleButtonClick: () => dispatch({
    payload: { isToggled: true } // 只传了payload，漏了type
  })
});

const ToggleButton = ({ toggleButtonClick }) => (
  <Button onClick={toggleButtonClick}>切换按钮</Button>
);

export default connect(null, mapDispatchToProps)(ToggleButton);

当Redux尝试解析这个不完整的action时，因为找不到必需的type字段，就会抛出解析类错误，也就是你看到的Unexpected token。

正确的写法 #

你只需要给action补上type属性即可，推荐两种方式：

方式1：定义独立的action creator（更规范）

先创建完整的action生成函数，确保包含type：

// 定义action type常量（避免拼写错误，建议单独文件管理）
const TOGGLE_BUTTON = 'TOGGLE_BUTTON';

// 完整的action creator
const toggleButtonAction = () => ({
  type: TOGGLE_BUTTON,
  payload: { isToggled: true }
});

// 在mapDispatchToProps中使用
const mapDispatchToProps = dispatch => ({
  toggleButtonClick: () => dispatch(toggleButtonAction())
});

方式2：直接在dispatch中传入完整action对象

如果逻辑简单，也可以直接在dispatch里写完整的action：

const mapDispatchToProps = dispatch => ({
  toggleButtonClick: () => dispatch({
    type: 'TOGGLE_BUTTON', // 补上必填的type字段
    payload: { isToggled: true }
  })
});

额外小提示 #

• 把action的type定义为大写常量，能有效避免拼写错误，也方便在reducer中匹配；
• 如果使用Redux Toolkit（现在官方推荐的Redux开发方式），它会自动帮你生成唯一的type字段，完全不用手动写，能从根源避免这类遗漏问题。

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