React Native - 动态列出/要求目录中的文件 [英] React Native - Dynamically List/Require Files In Directory

问题描述

我正在使用 Redux 并希望动态包含目录中的所有文件.

I am using Redux and would like to dynamically include all files in a directory.

/redux/index.js

// Actions

import * as authActions from './auth/authActions';
import * as deviceActions from './device/deviceActions';
import * as globalActions from './global/globalActions';
import * as menuActions from './menu/menuActions';
... etc

export const actions = [
  authActions,
  deviceActions,
  globalActions,
  menuActions,
...
];

// Reducers

import auth from './auth/authReducer';
import device from './device/deviceReducer';
import global from './global/globalReducer';
import menu from './menu/menuReducer';
...

import { combineReducers } from 'redux';

export const rootReducer = combineReducers({
  auth,
  device,
  global,
  menu,
...
});

在上面(简化的)例子中，所有的文件都是这样的结构:

In the above (simplified) example, all the files are of the structure:

/redux/
  /auth/
    authActions.js
    authReducer.js
  /device/
    deviceActions.js
    deviceReducer.js
  /global/
    globalActions.js
    globalReducer.js
  /menu/
    menuActions.js
    menuReducer.js
  ...

在这个 index.js 文件中，如果我可以动态读取 redux 目录中的所有目录，并且动态地要求操作和 reducer 导出，那么维护起来会容易得多.

In this index.js file, it would be much easier to maintain if I could dynamically read all the directories within the redux directory, and dynamically require the actions and reducers to export.

在常规节点环境中，我会做类似的事情(未测试，但说明了示例):

In a regular node environment, I would do something like (not tested, but illustrates the example):

import fs from 'fs'
import path from 'path'
import { combineReducers } from 'redux'

let actions = []
let reducers {}

fs
  .readdirSync(__dirname).filter((file) => {
    // Only directories
    return fs.statSync(path.join(__dirname, file)).isDirectory();
  })
  .forEach((module) => {
    const moduleActions = require(path.join(__dirname, module, `${module}Actions.js`);
    const moduleReducer = require(path.join(__dirname, module, `${module}Reducer.js`);

    actions.push(moduleActions)
    reducers[module] = moduleReducer.default
  });

export actions
export const rootReducer = combineReducers(reducers)

问题是 fs 模块在 react-native 中不是能够动态迭代代码库中的目录的东西.有 react-native-fs，但这是用于实际访问设备上的文件系统(在编译应用程序之后)[我认为?].上面的内容比单独要求所有动作和减速器并在动作数组和减速器对象中指定它们要干净得多.

The issue is that the fs module isn't a thing in react-native to be able to dynamically iterate through the directories in the codebase. There is react-native-fs, but that is for actually accessing the filesystem on the device (after the app is compiled) [I think?]. The above is much cleaner than individually requiring all of the actions and reducers, and specifying them in the actions array and reducer object.

有什么想法吗?

推荐答案

react-native 不支持动态加载模块.所有的 javascript 文件都打包成一个 js 文件.

Dynamic loading of modules is not supported in react-native. All the javascript files are bundled into one js file.

这篇关于React Native - 动态列出/要求目录中的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！