React-redux在线示例不应该工作

Question

我正在使用官方指南学习react redux

https://react-redux.js.org/introduction/basic-tutorial

在本指南中，有一个链接到示例项目：

https://codesandbox.io/s/9on71rvnyo

在这个例子中，有一部分我无法理解如何工作。

问题(即我无法理解的部分(在src/redux/store.js 文件中

在这个文件中有一个导入语句：

import rootReducer from "./reducers";

但在目录树中，没有在整个项目的任何文件中定义和导出rootReducer。

这个应用程序是如何工作的？

我错过了什么？

Answer 1

进行时

import <something> from 'somePath'

somePath通常是文件或node_modules中模块的相对路径，但它也可以是包含index.js文件的文件夹的路径。

这里，在同一目录中有一个名为reducers的文件夹，该文件夹包含一个index.js文件，该文件执行以下操作：

export default combineReducers({ todos, visibilityFilter });

因此，import rootReducer from "./reducers";指向嵌套文件夹中的index.js文件，并将其默认导出放入rootReducer变量中。

这并不是React或Redux特有的——这对于JavaScript中的import语法来说是通用的。

例如，如果app.js包含import something from './components'，则以下两种文件系统结构都将导致路径解析成功：

|- app.js
|- components (folder)
| index.js
| componentA.js
| componentB.js

|- app.js
|- components.js

Answer 2

答案很简单：

import rootReducer from "./reducers";

将自动在reducers-文件夹中查找名为index的文件。扩展。

如果你查看src/reduc/reducers/index.js，你会看到以下内容：

export default combineReducers({ todos, visibilityFilter });

它实际上是在导出示例项目在CCD_ 14中导入的内容。