反应原住民 - 动态列表/需求目录中的文件(React Native - Dynamically L

2019-09-30 10:24发布

我使用的终极版,并希望包括动态目录中的所有文件。

/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,
...
});

另外,在上述(简化的)实施例中,所有的文件都具有以下结构:

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

在此index.js文件,它会更容易维护,如果我能动态的终极版目录中读取所有的目录,并动态需要的行动和减速器输出。

在一个普通节点的环境中,我会做这样的事情(未测试,但足以说明为例):

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模块不在反应原生的事情,以便能够通过在代码库的目录遍历动态。 有反应母语-FS,但这是实际访问设备上的文件系统(应用程序编译后)我认为?]。 以上是不是单独需要的所有动作和减速器的,并且在动作阵列和减速器对象指定它们更清洁。

有任何想法吗?

Answer 1:

模块动态加载未反应原生支持。 所有的JavaScript文件都捆绑成一个js文件。



文章来源: React Native - Dynamically List/Require Files In Directory