如何将多个模块导入同一文件后作为单个模块重新导出？（Redux场景）

完全没问题，这种把分散的action模块集中到一个入口文件重新导出的方式，能让你的代码结构更清晰，也方便其他文件统一引用。下面根据你用的CommonJS语法（你示例里用了module.exports），给你具体的实现方式：

1. 基于CommonJS的实现 #

假设你已经有actions/bookmark.js：

module.exports = { 
  fetchBookmarkList: () => { return { type: 'FETCH_LIST' } }, 
  fetchBookmark: () => { return { type: 'FETCH_BOOKMARK' } } 
};

如果还有其他action模块，比如actions/user.js：

module.exports = {
  login: () => { return { type: 'LOGIN' } },
  logout: () => { return { type: 'LOGOUT' } }
};

那在actions/index.js里，你可以这样导入并重新导出所有模块：

// 导入各个子模块
const bookmarkActions = require('./bookmark');
const userActions = require('./user');
// 如果有更多模块，继续添加

// 合并所有action并导出
module.exports = {
  // 使用扩展运算符把每个模块的内容展开
  ...bookmarkActions,
  ...userActions
  // 其他模块同理添加
};

2. 切换到ES6模块语法（更简洁） #

如果你的项目支持ES6的import/export，推荐用这种写法，代码更清爽：

先把actions/bookmark.js改成ES6导出：

export const fetchBookmarkList = () => ({ type: 'FETCH_LIST' });
export const fetchBookmark = () => ({ type: 'FETCH_BOOKMARK' });

然后在actions/index.js里批量重新导出：

// 导出bookmark模块的所有导出项
export * from './bookmark';
// 导出user模块的所有导出项
export * from './user';
// 如果某个模块有默认导出，可以单独处理：
// export { default as someDefaultAction } from './someModule';

3. 使用时的引用方式 #

不管用哪种写法，后续在组件或者reducer里引用action时，只需要从actions/index.js统一导入即可，不用再记各个子模块的路径：

// CommonJS方式
const { fetchBookmarkList, login } = require('./actions');

// ES6方式
import { fetchBookmark, logout } from './actions';

注意事项 #

• 如果不同子模块里有同名的action creator，后面导入的模块会覆盖前面的，所以要确保action creator的命名唯一。
• 如果确实需要保留同名的，可以在重新导出时重命名：

  // CommonJS示例
  const bookmarkActions = require('./bookmark');
  module.exports = {
    fetchBookmarkItem: bookmarkActions.fetchBookmark,
    // ...其他
  };
  
  // ES6示例
  export { fetchBookmark as fetchBookmarkItem } from './bookmark';
  

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