You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

首个MERN应用出现'reducers'未从'./reducers'导出的导入错误

问题描述

基于MERN栈搭建首个应用,参照教程开发时遇到报错:
Attempted import error: 'reducers' is not exported from './reducers'
相关代码如下:

App.js代码

import React from "react";
import ReactDom from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";

import { reducers } from "./reducers";

import App from "./App";

const store = createStore(reducers, compose(applyMiddleware(thunk)));

ReactDom.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

reducers目录下posts.js代码

export default reducers = (posts = [], action) => {
  switch (action.type) {
    case "FETCH_ALL":
      return action.payload;
    case "CREATE":
      return posts;
    default:
      return posts;
  }
};

reducers目录下index.js代码

import { combineReducers } from "redux";
import Post from "./posts";

export default combineReducers({ posts });

报错界面参考:
报错界面截图

问题根因

一共3处代码错误共同触发报错:

  • 导入导出模式不匹配:reducers目录入口文件(index.js)使用export default默认导出合并后的reducer,App.js中却使用import { reducers }具名导入语法,无法匹配到导出项
  • combineReducers参数引用错误:index.js中导入posts模块时命名为Post,调用combineReducers时传入的是未定义的posts变量,会触发引用错误
  • posts.js导出语法不规范:直接给未声明的reducers变量赋值后导出,ES模块严格模式下会直接抛出变量未定义错误
  • 额外笔误:如果当前store初始化逻辑写在App.js文件内,文件中import App from "./App"属于自引用语句,会触发循环依赖问题(正常该段初始化逻辑应该放在项目入口index.js中,而非App.js组件文件内)
修复方案

按顺序修改对应文件即可:

  1. 修改reducers/posts.js,规范导出写法,同时修正CREATE动作的返回逻辑(原逻辑不会追加新创建的帖子):
const postsReducer = (posts = [], action) => {
  switch (action.type) {
    case "FETCH_ALL":
      return action.payload;
    case "CREATE":
      return [...posts, action.payload];
    default:
      return posts;
  }
};
export default postsReducer;
  1. 修改reducers/index.js,统一导入命名,正常合并reducer:
import { combineReducers } from "redux";
import posts from "./posts";

export default combineReducers({ posts });
  1. 调整入口文件的导入语句,匹配默认导出规则:如果store初始化逻辑写在src/index.js入口文件中,直接将具名导入改为默认导入即可;如果误写在App.js中,需要把这段逻辑迁移到index.js,删除App.js里的自引用代码。
    正确的入口文件导入写法:
// 改为默认导出对应的导入语法
import reducers from "./reducers";

内容的提问来源于stack exchange,提问作者user12761285

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 09:33:18