Question

我正在研究React-Redux，我有一个像这样的例子

const todoApp = combineReducers({
  todos,
  visibilityFilter
})

export default todoApp /*from reducers*/

然后我

import reducer from './reducers'

const store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

因此，它没有在./reducers中导出任何缩减器，并且语法导入在ES6中不是import * as reducer。它为什么有效？

Answer 1

export default todoApp

因此，当import reducer from './reducers'被调用时，todoApp存储在reducer内。这就是为什么我们使用默认关键字。变量名称不需要是reducer，它可以是任何名称。

通过使用default关键字，将单个值或回退值传递给导入它的文件

同样，如果我们导出一个没有默认值的函数例如

export function someFunc(){...}

我们可以通过

导入它

import {someFunc} from '/file/path.js'

编辑：文件中只能有一个默认导出。当我们导入其他组件时，我们需要将组件名称指定为标识符（例如{someFunc}）。对于默认导入，我们可以使用任何我们想要的标识符。

Read more about import here

Answer 2

从模块导出默认值时，基本上导出匿名变量。因此，当您导入类似import something from 'somewhere'之类的内容时，可以选择在导入文件中使用的任何名称。

Answer 3

导出默认todoApp

所以每当你＆＃34;从＆＃39; ./ reducer＆＃39;＆＃34;中导入xyz时，reducer.js将返回 todoApp默认情况下，reducer.js会返回它。无论您提供的名称，您可以更改＆＃34; ./ reducer＆＃34;＆＃39;至＆＃39;从./reducers'导入红色;它也适用于那种情况。
每次导入时都应记住一件事默认元素，你应该避免应用＆＃39; {}＆＃39;围绕进口元素。所以在你的情况下＆＃34;从＆＃39; ./ reducer＆＃39;＆＃34;中导入{reducer}将是错的。
但如果你写＆＃34;导出const todoApp＆＃34;在reducers.js中，然后在那里如果您需要在导入时给出确切的名称，现在必须这样做将其导入为＆＃39; ./ reducers＆＃39;
并且文件中只应有一个默认导出。

使用React-Redux导入和导出reducer

3 个答案: