用于 Fronted 和 Dashboard 的 React Redux 文件夹结构

Posted 2023-02-16

【中文标题】用于 Fronted 和 Dashboard 的 React Redux 文件夹结构

【英文标题】：React Redux folder structure for Fronted and Dashboard

【发布时间】：2016-11-18 13:20:31

【问题描述】：

我正在使用 MERN 堆栈来开发应用程序。前端（React + Redux）与后端（express + mongo）完全隔离。我正在使用 CORS、JWT 和所有好东西来连接它们。前端本身有一个用户视图和仪表板或管理员视图。现在我陷入了需要根据我的文件夹结构定义反应路线的地方。有人可以为我的用例建议一个正确的文件夹结构和路由器配置吗？

【参考方案1】：

如果您打算使用一些通用组件，或者双方（用户和仪表板）的应用程序不是很大，您可以将所有视图存储在同一目录中，例如/client。

关于路线，这取决于。如果您使用 react-router 之类的东西，ofc。您应该将路线存储在客户端文件夹中。或者您可以创建common 之类的目录，以在服务器端和客户端使用一些共享功能（和路由）。

【参考方案2】：

React 对如何将文件放入文件夹没有意见。但根据我对 react 和 redux 的经验，以下文件结构非常适合仪表板。

my-app
 public
 src
   assets
    images(folder)
    scss(folder)
   utils
   routers
   store
   components
    common
      ...
    users
     Reducer.js
     Action.js
     Api.js
     Constants.js
     Helpers.jsx
     components(folder)
      Index.jsx
      Item.jsx
      Form.jsx
      Show.jsx
      ....
     containers(folder)
      Credate.jsx
      Index.jsx
      Show.jsx
     styles( custom style folder)

通常尝试为 Reducer、Action、Api、Constants 等保留 .js/.ts 扩展名，为另一个文件保留 .jsx/.tsx 扩展名。

【参考方案3】：

我认为这个问题没有正确/错误的答案。这取决于团队。

我喜欢将视图层和数据层分开。我喜欢有一个好的构建设置，资产分开，本地服务器分开，配置/脚本分开。

我的 SPA 设置的基本版本如下所示：

.babelrc
.gitignore
package.json
karma.conf.js
src
  components
    App
     App.js
     App.test.js
  data
    app
      appActions.js
      appActions.test.js
      appReducer.js
      appReducer.test.js
  utils
webpack
  webpack.config.js
  webpack.dev.js
  webpack.prod.js
  webpack.test.js
server
 index.js  [mock express server]

对于同构应用，我使用 firebase 作为后端。我为 SPA 编译了一个 client.js，为后端编译了一个 server.js。

.babelrc
.gitignore
package.json
karma.conf.js
client.js
server.js
src
  components
    App
     App.js
     App.test.js
  data
    app
      appActions.js
      appActions.test.js
      appReducer.js
      appReducer.test.js
  utils
webpack
  webpack.config.js
  webpack.dev.js
  webpack.prod.js
  webpack.test.js
  webpack.server.js
functions
  package.json
server
  index.js