javascript - ES6 导入和导出是如何工作的？

Question

我正在编写 react 应用程序，并且我有包含操作文件的目录，我的示例操作文件看起来像

export const USER_LOADING_START = 'USER_LOADING_START';
export const USER_LOADED = 'USER_LOADED';

export function userLoadingStart() {
    return {
        type: USER_LOADING_START
    };
}

export function userDataLoaded(value) {
    return {
        type: USER_LOADED,
        payload: {
            value: value
        }
    };
}

在 actions dir 中我有一个名为 index.js 的文件，其内容为

import * as userActions from './userActions';

let exp = {
    ...userActions,
};

export default exp;

所以在其他文件中我想导入我的 Action 创建者，所以我使用:

import {userLoadingStart} from './actions';

它不起作用，但如果我写:

import actions from '../actions';

const { userLoadingStart } = actions;

那么它工作正常，那么我做错了什么？

我试过了

export {
    ...userActions,
    ...spinnerActions,
    ...errorActions
}

和

export exp

但它不能被 webpack 编译

Answer 1

So in other files i want to import my action creators so i use:

import {userLoadingStart} from './actions';

要使其发挥作用，这意味着 ./actions 必须导出命名值。问题是您的逻辑当前将所有内容捆绑在一起并将其导出为名为 default 的单个命名导出。最简单的方法是让你的索引执行

export * from './userActions';

本质上将 ./userActions 中的所有内容作为 ./actions 的导出传递。