reactjs - 同构(React/Redux/Express/Mongo)应用程序中的数据模型和业务逻辑

Question

我最近使用 React-Redux-Express-Mongoose 堆栈构建了一些同构/通用项目。

在我的 Mongoose 模型中包含很多业务逻辑。作为一个非常基本的示例(请原谅我的 ES6):

import mongoose, {Schema} from 'mongoose';

const UserSchema = new Schema({
  name: String,
  password: String,
  role: String
});

UserSchema.methods.canDoSomeBusinessLogic = function(){
  return this.name === 'Jeff';
};

UserSchema.methods.isAdmin = function(){
  return this.role === 'admin';
};

这在服务器上一切都很棒，但是当这些模型在浏览器中作为普通 JSON 对象进行水化时，我必须在某些 React 组件或 Redux reducer 中重新实现相同的业务逻辑，这感觉不太好对我来说很干净。我想知道如何最好地解决这个问题。

从阅读 Mongoose 的内容来看，浏览器支持似乎很有限，主要只是用于文档验证。我想我的主要选择是:

• 将所有业务逻辑移至一些“普通”JS 类中，并在各处实例化它们。例如:

  # JS Class definition - classes/user.js
  export default class User {
      constructor(data = {}){
        Object.assign(this,data);
      }
  
      canDoSomeBusinessLogic(){
        return this.name === 'Jeff';
      };
  
      isAdmin(){
        return this.role === 'admin';
      }
  }
  
  # Server - api/controllers/user.js
  import UserClass from 
  User.findById(1,function(err,user){
      let user = new UserClass(user.toJSON();
  });
  
  # Client - reducers/User.js
  export default function authReducer(state = null, action) {
    switch (action.type) {
      case GET_USER:
        return new UserClass(action.response.data);
    }
  }
  
  # Client - containers/Page.jsx
  import {connect} from 'react-redux';
  
  @connect(state => ({user: state.user}))
  export default class Page extends React.Component {
      render(){
        if(this.props.user.isAdmin()){ 
          // Some admin 
        } 
      }
  }
  

• 将所有业务逻辑移至一些静态辅助函数中。我不会再次写出整个示例，但本质上是:

  # helpers/user.js
  export function isAdmin(user){
      return user.role === 'admin';
  }
  

我认为以上两者之间的差异只是个人喜好。但是还有人对同构应用程序和数据建模有其他想法吗？或者看到过任何解决此问题的开源示例。

作为上述内容的扩展，同构 save() 函数怎么样？用户.保存()。因此，如果在客户端上调用，它可以向相关 API 端点执行 POST，如果在服务器上运行，它将调用 Mongoose save() 函数。

Answer 1

剧透:期待一个固执己见的回复。没有“正确”的方法来做到这一点。

首先，我想做 difference between isomorphic and universal清晰，以便您确切地知道我们在说什么:

Isomorphism is the functional aspect of seamlessly switching between client- and server-side rendering without losing state. Universal is a term used to emphasize the fact that a particular piece of JavaScript code is able to run in multiple environments.

在通用应用程序中进行如此多的抽象值得吗？

通常，您想要一个通用应用程序是让客户端和预渲染应用程序的服务器都加载相同的代码。尽管您可以从预渲染应用程序的同一服务器运行 API，但我宁愿代理它并在不同的进程中运行它。

让我向您展示两个不同的 React 存储库:

• React + API erikras/react-redux-universal-hot-example
• react wellyshen/react-cool-starter

Erikras 著名的样板文件使用他的通用应用程序在全局共享依赖项，并在预渲染页面的服务器和客户端之间共享代码。尽管他可以，但他不分享验证。 Survey API validation Survey client validation

Wellyshen 没有 API，但他也共享他的依赖项和代码，尽管只是在服务器和客户端之间。 server加载路线、商店以及客户端应用程序正在运行的所有内容。即提供同构。

话虽如此，是否将所有验证移至一处取决于您。我可能只会考虑将其用于复杂的验证案例，例如电子邮件验证，您实际上可以为此提供帮助。 (这只是一个例子，对于电子邮件验证，您已经有 validator )。在某些情况下，依赖 API 验证可能会更方便，尽管这不是最佳实践。

简单的验证(如示例中的验证)可以使用 redux-form 轻松完成无论如何，我知道没有直接的方法可以在 API 上翻译它。相反，您可能应该寻找 express-validator就在上面。

还有一件事，尽管一些非常流行的 React 样板将 API 和客户端结合在一起，但我倾向于使用两个不同的存储库:React + 服务器端渲染和 API。从长远来看，它将产生更清晰的代码，并且代码之间完全独立。 organizing-large-react-applications