使用 React-Redux 导入和导出 reducer

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 中将任何内容导出为 reducer，并且语法导入也不是 ES6 中的 import * as reducer。为什么有效？

Answer 1

export default todoApp

因此，当调用 import reducer from './reducers' 时，todoApp 存储在 reducer 中。这就是我们使用 default 关键字的原因。变量名不需要是 reducer 它可以是任何东西。

通过使用 default 关键字，单个值或后备值被传递到导入它的文件

类似地，如果我们导出一个没有默认的函数例如

export function someFunc(){...}

我们可以通过

导入

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

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

Read more about import here

Answer 2

当您从模块中将某些内容作为默认值导出时，基本上是在导出一个匿名变量。所以当你导入这样的东西时 import something from 'somewhere' 东西可以是你选择在执行导入的文件中使用的任何名称。

Answer 3

导出默认的 todoApp

因此，每当您“'import xyz from './reducers'”时，reducer.js 将 return todoApp 因为默认 reducer.js 是 returning 它。无论你给的名字，你可以把'import reducers from "./reducers"'改成 'import red from ./reducers' 在那种情况下它也可以工作。
只有一件事你应该记住，无论何时导入您应该避免在导入的周围应用“{}”的默认元素元素。所以在你的情况下 "import {reducer} from './reducer'" 会错了。
但是如果你在 reducers.js 中写 "export const todoApp" ，那么在那个如果您在导入时必须给出确切的名称，现在您必须将其导入为 'import {todoApp} from './reducers'
而且一个文件应该只有一个默认导出。

使用 React-Redux 导入和导出 reducer

Import and export reducer with React-Redux

javascript

reactjs

redux

react-redux