首个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组件文件内)
修复方案
按顺序修改对应文件即可:
- 修改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;
- 修改reducers/index.js,统一导入命名,正常合并reducer:
import { combineReducers } from "redux"; import posts from "./posts"; export default combineReducers({ posts });
- 调整入口文件的导入语句,匹配默认导出规则:如果store初始化逻辑写在src/index.js入口文件中,直接将具名导入改为默认导入即可;如果误写在App.js中,需要把这段逻辑迁移到index.js,删除App.js里的自引用代码。
正确的入口文件导入写法:
// 改为默认导出对应的导入语法 import reducers from "./reducers";
内容的提问来源于stack exchange,提问作者user12761285
相关产品推荐
相关产品推荐

