创建Dispatcher时遇TypeError，React编译报错：Super表达式需为函数或null

这个错误的核心原因是你导入Dispatcher的方式不对——你现在拿到的不是Flux的Dispatcher构造函数，而是整个flux模块对象，自然没法用它来继承类。

问题分析 #

当你写import Dispatcher from "flux"时，实际上导入的是flux包的默认导出，而这个默认导出并不是Dispatcher构造函数，而是一个包含Dispatcher属性的对象。这就导致你尝试extends Dispatcher时，相当于继承了一个普通对象，而非构造函数，所以React编译器抛出了那个错误。

修复方案 #

修正Dispatcher的导入语句，使用命名导入来获取正确的构造函数：

// index.js 正确代码
import { Dispatcher } from "flux";
import React from "react";

export class CountdownDispatcher extends Dispatcher {
  handleAction(action) {
    console.log("dispatching action:", action);
    this.dispatch({ source: "VIEW_ACTION", action });
  }
}

之后在其他文件中导入你的CountdownDispatcher时，确保用命名导入的方式：

import { CountdownDispatcher } from './index.js';

补充说明 #

《React and Redux》这本书的示例可能是基于旧版本的Flux包，或者书写时省略了命名导入的大括号导致你误解。当前版本的Flux包中，Dispatcher是作为命名导出存在的，必须通过import { Dispatcher } from 'flux'才能拿到可继承的构造函数。

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