將操作文件拆分爲多個文件

我的React應用程序中的操作文件變得非常大且難以管理。儘管事實上我已經有了多個動作文件，例如userActions.js，accountActions.js等，但這些文件非常詳細，我需要不斷上下滾動才能找到需要的特定動作。將操作文件拆分爲多個文件

我的想法是將一個模塊的動作文件拆分爲多個文件，然後將它們導入父級文件，這樣在我的React組件中，我仍然導入一個動作文件。

請務必記住我正在拆分單個模塊的動作文件。我已經爲應用程序的不同域設置了多個操作文件。我說的是即使是單個模塊的動作文件也越來越大。

我有點困惑如何這將工作，雖然。

說，我有一堆這樣的文件。我會救以下爲module1UserActions.js

export const userAction1 = (value) => { 
    return { 
     type: types.ACTION1, 
     value 
    }; 
} 

export const userAction2 = (value) => { 
    return { 
     type: types.ACTION2, 
     value 
    }; 
}

然後，讓我們說我有module1AccountActions.js文件看起來像這樣：

export const accountAction1 = (value) => { 
    return { 
     type: types.ACTION3, 
     value 
    }; 
} 

export const accountAction2 = (value) => { 
    return { 
     type: types.ACTION4, 
     value 
    }; 
}

如果我希望把所有的人都在一起，一個單獨的文件，我可以在我的組件中導入，我將如何將它們放在一起？說，以下是將單個文件放在一起的module1Actions.js。我猜那個文件只會包含一堆進口。

import * as userActions from 'module1UserActions'; 
import * as accountActions from 'module1AccountActions';

，然後導入，在我的組件單獨的文件，但我想我會遇到問題與動作名稱，對不對？

import * as actions from 'module1Actions';

但我認爲，當我需要使用userAction1，我不得不稱其爲actions.userActions.userAction1

請問這種方法的工作？

來源

2016-12-26 Sam

困惑，我實際的問題是什麼，什麼這與反應做，但我想你所談論的是'功能簡單的別名（） { return importedService.funcName（）; }' – Maxwelll

您需要將您的操作明確地導出到操作文件中。

import * as userActions from 'userActions'; 
import * as accountsActions from 'accountActions'; 

export { 
    ...userActions, 
    ...accountActions, 
};

我使用的傳播運營商（...）拼合生成的對象。你可以導入，現在叫你的行爲是這樣的：

import * as actions from 'actions'; 

actions.userAction1();

來源

2016-12-26 21:11:25

與傳播的出口部分是失蹤的一塊！謝謝！ – Sam

傳播運算符的位置出現錯誤。我懷疑這是由於傳播仍處於提案階段。然後我嘗試使用Object.assign，即const myActions = Object.assign（{}，actions1，actions2）。這工作，但無法弄清楚如何導出它。如果我導出默認的myAction，它可以工作，但是我需要添加「默認」，然後才能調用動作，例如actions.default.someAction（）;我如何導出它沒有默認？ – Sam

你可以將它作爲默認值導出，並通過'actions'中的'import actions'不帶別名地導入它;' –

將操作文件拆分爲多個文件

回答

相關問題