进口/出口 sagas,containers,reducers答案

【问题标题】：Import/Export sagas,containers,reducers进口/出口 sagas,containers,reducers
【发布时间】：2018-10-07 05:56:07
【问题描述】：

在我的应用程序中，我有一个文件夹（Testimonial），其index.js 包含下面提到的代码 sn-p。因为我要在index.js 中导出所有 saga、reducers、容器、组件，然后想在app.js 中导入它们

import * as actions from './actions';
import * as components from './Components';
import * as constants from './constants';
import * as containers from './Containers';
import reducer from './reducers';
import * as sagas from './sagas';

export default {
    actions,
    components, 
    containers,
    constants,
    reducer, 
    sagas
};

现在我如何导入让我们说只在我的app.js 中的容器，以及当我写的时候

import Testimonial from './ignitus-Testimonial';

这是我导入对象时的样子，console.log() 它在我的app.js 上

Testimonail {动作：{…}，组件：{…}，容器：{…}，常量：{…}，reducer：ƒ, …}

但在我所做的所有导出中，我只想在app.js 中使用containers。

【问题讨论】：

现在有点糊涂了，你说你把它们都存储在index.js文件中，那么，你import它们来自ignitus-Testimonial.js文件。 index.js 和 ignitus-Testimonial.js 一样吗？

标签： reactjs import react-redux export directory-structure

【解决方案1】：

如果希望单独使用导出，则不应将它们导出为default export。

它们可以重新导出为：

import * as actions from './actions';
import * as components from './Components';
import * as constants from './constants';
import * as containers from './Containers';
import reducer from './reducers';
import * as sagas from './sagas';

export {
    actions,
    components, 
    containers,
    constants,
    reducer, 
    sagas
};

它们可以单独导入为：

import { sagas } from './ignitus-Testimonial';

或一起作为：

import * as testimonial from './ignitus-Testimonial';

这种方法的问题在于它会扼杀 tree-shaking 优化，因此不建议将其用于输出大小很重要的用途，即客户端应用程序。

【讨论】：

【解决方案2】：

使用如下命名导入

import Testimonial ,{containers} from './ignitus-Testimonial';

【讨论】：

不，这不能解决问题。
也是组件，所以如果我要写 import {containers} from './ignitus-Testimonial'; 那么我要导入的呢。
在写 import {containers} from './ignitus-Testimonial'; 时它返回一个对象操作：{esModule: true} 组件：{_esModule: true} 常量：{_esModule: true} 容器: {__esModule: true} reducer: ƒ TestimonialReducer() sagas: {default: ƒ, __esModule: true} __proto: Object
import Testimonial ,{containers} from './ignitus-Testimonial';
上面的会导入你的组件和容器，如果有错你能分享ignitus-Testimonial.js/jsx的export语句吗

【解决方案3】：

我自己解决了 :) 这样写可以解决问题。 <Testimonial.containers.TestimonialContainer />

【讨论】：