使用redux反應本機index.js

Question

我是React和React native的新手。

我有一個包含多個組件的文件夾，我已經能夠創建一個index.js文件來導出文件夾內的所有組件，因此可以在其他組件中執行以下操作：

# /components/OneComponent.js
...
export { OneComponent }

# index.js
import { OneComponent } from './components'
```

現在，我正在與Redux合作，我想完成同樣的事情，但是我不知道該怎么做。 在我的組件中，我將組件導出如下：

# /component/OneComponent.js
export default connect(mapStateToProps, { myFunction})(OneComponent);

我猜應該如下

export { connect(mapStateToProps, { myFunction})(OneComponent) };

但是它不能編譯。

Answer 1

剛測試出來。

您可以通過將connect調用的結果分配給const來解決您的錯誤，然后像這樣將其導出。

const comp1 = connect(mapStateToProps)(MyComponent);

export {comp1 as MyComponent};

Answer 2

我不認為問題是Redux， import和export ES6方法很麻煩。 例如：

• 示例1（ export default ）：

導出默認內容時，不應使用{}進行導入

## CORRECT
# /components/OneComponent.js
...
export default connect(mapStateToProps, { myFunction})(OneComponent);

# index.js
import AnyName from './components/OneComponent.js'

## WRONG
# /components/OneComponent.js
...
export default connect(mapStateToProps, { myFunction})(OneComponent);

# index.js
import { OneComponent } from './components/OneComponent.js'

• 示例2（不帶export default ）：

嘗試命名您的對象鍵

##CORRECT
# /components/OneComponent.js
...
export { OneComponent: connect(mapStateToProps, { myFunction})(OneComponent) };

# index.js
import { OneComponent } from './components'

##WRONG
# /components/OneComponent.js
...
export { connect(mapStateToProps, { myFunction})(OneComponent) };

# index.js
//It wont find the key OneComponent on exported object
import { OneComponent } from './components'

Answer 3

從索引導出組件時，您需要像這樣導出它們：

export {connect(mapStateToPops,mapDispatchToProps)(ComponentName)}

然后在你的index.js中： export * from 'YourComponentRoute

請記住，如果您默認導出，則將導出唯一對象的實例。 如果導出{}，則導出的是對象的“副本”。