Question

在许多教程中，我见过人们在做以下事情：

在RegistrationForm文件夹中创建components文件：

const RegistrationForm= (props) => (
  <div className="registration-page">
    <Helmet>
      <title>NT SN | Registration</title>
    </Helmet>
    ... doing something
  </div>
)

export default RegistrationForm

然后在containers文件夹中，他们创建相同的文件RegistrationForm并将其连接到store：

import { connect } from 'react-redux'
import RegistrationFormComponent from '../../components/RegistrationPage/RegistrationForm'

const RegistrationForm = connect(state => ({
  activeUser: state.activeUser
}), {})(RegistrationFormComponent)

export default RegistrationForm

我可以connect component store个component文件中的containers吗？如果是，那么<Link href={'/content'} as={'/the-real-url'}> <a>Test Link</a> </Link>文件夹的重点是什么？

Answer 1

我可以直接将组件连接到组件文件中的商店吗？

是的，你可以

如果是，那么容器文件夹的重点是什么？

如果您将容器中的组件连接到您的结果之后 connect（mapStateToProps，mapDispatchToProps）（你的组件）不会可以重复使用。如果你有单独的连接文件逻辑，您可以在多个dumbComponents中重复使用它

您的容器会将数据映射到redux状态以及操作。您只需使用该容器导出调用任何dumbComponent，即可获得所有数据和操作。当你有不同的哑巴组件观察并期待相同的数据和动作时，用例会更加明显

Answer 2

我可以直接将组件连接到组件中的商店文件？

是

如果是，那么容器文件夹的重点是什么？

这只是某些人喜欢组织代码的方式。这个想法是你将组件的表现部分与组件的“繁重和逻辑”部分区分开来。

请参阅Presentational and Container Components文章了解其背后的逻辑。

Answer 3

实际上，您可以按照自己想要的方式整理文件夹。我目前使用两个具有不同代码结构的项目。在其中一个中，我按域/功能拆分文件夹，而不是按容器/组件

拆分

这是关于包含大量链接的文件夹结构的好文章： https://redux.js.org/docs/faq/CodeStructure.html

P.S。当然你可以这样做

将组件连接到组件js文件中的存储

3 个答案: