使用 React-Redux 导入和导出 reducer答案

【问题标题】：Import and export reducer with React-Redux使用 React-Redux 导入和导出 reducer
【发布时间】：2017-03-17 05:21:58
【问题描述】：

我正在研究 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。为什么会起作用？

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

export default todoApp

所以当import reducer from './reducers' 被调用时，todoApp 存储在reducer 中。这就是我们使用默认关键字的原因。变量名不必是reducer，可以是任何名称。

通过使用默认关键字，将单个值或备用值传递给导入它的文件

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

export function someFunc(){...}

我们可以通过

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

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

Read more about import here

【讨论】：

但是，reducers 中还有另外一个组件，就是用来 combineReducers 的，那么它怎么知道要导入哪个呢？
如果有另一个导出组件，我们不能为此使用默认值。只能有一个默认导出。如果我们要导入其他组件，我们需要使用import componentName from './reducer.js'。
但在同一个文件夹减速器下，我有 3 个使用导出默认值的不同组件。在我上面提到的代码中，todoApp import todos 和 visibilityFilter 是导入默认值，然后再次导出默认值，都在同一个文件夹中
啊，好吧，我明白了，但是还有一个问题，因为 ./reducers 文件根本不存在，它只是一个文件夹。
那我猜那里有一个 index.js 文件。如果有import语句会先看那个文件。

【解决方案2】：

导出默认 todoApp

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

【讨论】：

是的，但我的项目中没有文件缩减器。只有一个名为reducers的文件夹，那么这里的./reducers是什么？
下面这段代码必须写在某个文件中，它是哪个文件。 const todoApp = combineReducers({ todos, visibilityFilter }) export default todoApp combine reducers 用于组合你项目中的所有reducer 返回一个reducer 是所有 reducer 的组合，在你的情况下它是 todoApp

【解决方案3】：

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

【讨论】：

但是，从reducers那里，还有另外一个组件，是用来combineReducers 的，那么它怎么知道要导入哪个呢？
combineReducers 是一个 redux 函数，它返回一个 reducer，它调用您传递给 combineReducers 的每个 subreducer。所以每一个来自 ./reducers 的 reducer 都会在一个 action 被调度时被调用。在您的情况下，每个 subreducer 都会收到与 subreducer 同名的状态的一部分。这是因为您将其称为 `combineReducers({todos, visibilityFilter});