如何按文件名后缀自动导入Redux相关文件？组件结构合理性咨询

首先明确说：这种按功能/组件聚合Redux相关代码的做法不仅没有严重问题，反而现在是很多React/Redux项目推荐的实践方向，尤其是对于新手来说，逻辑内聚的结构会让你更容易跟踪组件和对应的状态管理逻辑。

一、这种结构的优缺点分析 #

优点 #

• 逻辑内聚：同一个组件/功能的UI、状态修改逻辑（reducer）、动作（actions）都放在同一个目录下，不用在components/、reducers/、actions/之间来回跳转，维护和新增功能时效率更高。
• 新手友好：你能直观看到某个组件的所有关联代码，更容易理解Redux逻辑和组件的绑定关系，降低学习门槛。
• 扩展性灵活：如果后续某个功能需要拆分或者合并，直接移动对应的文件夹即可，不用分散移动多个文件。

潜在注意点（非严重问题） #

• 大型项目的重复逻辑风险：如果项目规模很大，多个功能可能会出现相似的状态逻辑，这时候可能需要抽离公共reducer/action，但这属于后期优化问题，初期完全可以接受。
• Redux Toolkit更适配：如果你还在写传统的拆分式reducer/actions，建议切换到Redux Toolkit的createSlice，它天生把reducer、actions、初始状态封装在同一个文件里，不用再拆成xxx_Reducer.js和xxx_Actions.js，结构会更简洁。

二、实现自动化导入的方案 #

根据你使用的构建工具（Webpack/Vite），可以用动态扫描模块的方式实现自动化导入，下面是具体示例：

1. Webpack环境下的自动化导入（以reducer为例） #

Webpack提供了require.contextAPI，可以扫描指定目录下的文件，自动导入并合并reducers：

// src/store/rootReducer.js
import { combineReducers } from '@reduxjs/toolkit';

// 扫描当前目录及所有子目录下，以_Reducer.js结尾的文件
const reducerContext = require.context('../', true, /_Reducer\.js$/);

const reducers = {};

reducerContext.keys().forEach(filePath => {
  // 从文件名中提取reducer的名称（比如RadioBox_Reducer.js → radioBox）
  const match = filePath.match(/([A-Za-z0-9]+)_Reducer\.js$/);
  if (match) {
    const reducerName = match[1].replace(/^[A-Z]/, char => char.toLowerCase());
    // 导入reducer并添加到reducers对象中
    reducers[reducerName] = reducerContext(filePath).default;
  }
});

// 合并所有reducer导出
export default combineReducers(reducers);

对于actions，你可以在src/actions/index.js里做类似处理，自动导入所有_Actions.js的文件，统一导出：

// src/actions/index.js
const actionsContext = require.context('../', true, /_Actions\.js$/);

const allActions = {};

actionsContext.keys().forEach(filePath => {
  const match = filePath.match(/([A-Za-z0-9]+)_Actions\.js$/);
  if (match) {
    const actionNamePrefix = match[1].replace(/^[A-Z]/, char => char.toLowerCase());
    const moduleActions = actionsContext(filePath).default;
    // 把actions挂载到对应前缀下，比如radioBox.toggle
    allActions[actionNamePrefix] = moduleActions;
  }
});

export default allActions;

2. Vite环境下的自动化导入 #

Vite用import.meta.glob替代Webpack的require.context，写法类似：

// src/store/rootReducer.js
import { combineReducers } from '@reduxjs/toolkit';

// 扫描所有子目录下的_Reducer.js文件，eager: true表示同步导入
const reducerModules = import.meta.glob('../**/*_Reducer.js', { eager: true });

const reducers = {};

for (const filePath in reducerModules) {
  const match = filePath.match(/([A-Za-z0-9]+)_Reducer\.js$/);
  if (match) {
    const reducerName = match[1].replace(/^[A-Z]/, char => char.toLowerCase());
    reducers[reducerName] = reducerModules[filePath].default;
  }
}

export default combineReducers(reducers);

3. 更推荐的方案：用Redux Toolkit的Slice #

如果你还没使用Redux Toolkit，强烈建议切换过去。它的createSlice可以把组件的reducer、actions、初始状态都写在同一个文件里，比如RadioBox.slice.js：

// src/form/box/radiobox/RadioBox.slice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  checked: false,
  value: ''
};

const radioBoxSlice = createSlice({
  name: 'radioBox',
  initialState,
  reducers: {
    toggleChecked: (state) => {
      state.checked = !state.checked;
    },
    setValue: (state, action) => {
      state.value = action.payload;
    }
  }
});

// 自动生成actions
export const { toggleChecked, setValue } = radioBoxSlice.actions;
// 导出reducer
export default radioBoxSlice.reducer;

这种情况下，自动化导入slice的reducer会更简单，而且不用再拆分_Reducer.js和_Actions.js，结构更清晰。

三、新手建议 #

1. 先手动导入熟悉逻辑：自动化导入虽然方便，但初期手动导入能让你更清楚Redux的数据流，避免出现问题难以排查。
2. 优先使用Redux Toolkit：它简化了Redux的样板代码，而且天生适配这种按功能/组件归类的结构，是现在Redux官方推荐的方式。
3. 不用过度担心结构问题：只要项目逻辑清晰，按功能归类的结构完全可以支撑到中大型项目，后期如果需要优化再抽离公共逻辑即可。

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