React - 没有 Redux 的可扩展架构（MVC + DDD 方法）

Posted 2023-02-16

技术标签:

【中文标题】React - 没有 Redux 的可扩展架构（MVC + DDD 方法）【英文标题】：React - Scalable architecture without Redux (MVC + DDD approach) 【发布时间】：2021-12-28 08:39:29 【问题描述】：

简介

React 真的很灵活，似乎我们在编写接口时不必遵循特定的架构，与其他库不同，它就像编写普通视图一样。对于小型 Web 应用程序，这很酷，但是......一旦您的应用程序开始增长，您的编码速度就会逐渐降低，这与您从一开始就定义了架构的原则相反。

我的架构

就我而言，我没有使用 Redux 进行状态管理...相反，我使用的是 React Context + React Hooks。

这是我当前的项目结构（使用 firebase 构建的无服务器应用程序）：

/app
   /components
      /Activity
      /Authentication
      /Profile
      /Buttons
      /Text
      /Inputs
      /Giphy
      /Messaging
      /HOCs
      ...

   /screens
      /Activity
      /Authentication
      /Profile
      /Messaging
      ...
   
   /contexts
      /Users
      /Content
      /Auth
      ...

   /hooks
      /auth
      /profile
      /users
      /content
      /badges
      /i18n
      ...

   /navigation
      /Stacks
      /Tabs
      ...

   /services
      /third-party
      /firebase 
         /api
      ...

   /lib
   /theme
   /styles
   /utils


/functions (backend)

如您所见，我正在使用某种领域驱动设计来构建我的项目文件。

另外，我使用钩子将关注点与屏幕和组件分开，并在包含相应 reducer 的上下文中管理复杂状态（或需要在路由之间同步的状态）。

在我看来，这就像某种 MVC。视图由我所有的 React 功能组件组成，控制器由我所有的业务和 UI 钩子组成，我的模型的数据包含在上下文中（或者，至少是动态数据，因为效率原因）。

如您所见，我有一个“服务”文件夹，它只是我的业务挂钩用来连接到我的服务器（云功能）的接口。

问题

这个架构有名字吗（flux/redux??）？我的意思是，随着时间的推移，作为一名 React 程序员，一个又一个错误，我最终以一种“自然”的方式组织我的项目。

用钩子分割我的所有组件逻辑是一种反模式吗？我的意思是，所有我的项目的功能组件只包含事件处理程序或 JSX 来呈现 UI。我已经将每一个代码块都移动到了钩子中，其中一些包含我的业务逻辑，另一些只是与图形界面相关的复杂逻辑（动画，...）

为了完善我当前的架构，您给了我哪些建议？

使用带有 React 上下文的选择器？我已经实现了一些自定义钩子，它们只是从上下文中读取和计算派生数据......因为我不能使用“useSelector”，我不知道这是否是典型的，因为它们只是消耗必要的上下文（useContext）和然后执行一些计算。

Redux 真的有必要吗？对于一个中型项目，我使用 React Context 处理得很好，并且在 hooks 的帮助下，我的代码非常干净。你认为随着时间的推移，随着项目的不断发展，是否有必要迁移到 Redux？

react hooks 是应用程序的控制器吗？

【问题讨论】：

这似乎更像是一个包含多个未解决问题的一般架构讨论。你确定这是正确的地方吗？很多将归结为个人喜好。我已经看到了类似于“flux”的全局状态管理实现，其反应上下文与 redux 有点相似。在每种情况下，我都更喜欢 redux。它是众所周知的、已建立的，并将扩大规模。缺点（冗长，你可能永远不需要时间旅行，撤消等）并没有超过恕我直言的优点。我相信你会在另一个方向得到很多回应:) 【参考方案1】：

嗯，不完全确定这是提出此类问题的正确位置，但让我们尝试从我的角度来回答这些问题。

答案

HOCs

lib

theme

styles

utils

html

const getListOfNews = list("NEWS_LIST", "/api/news/");

list

const list = (resource, url) => (params = ) => dispatch => // your implementation... ;

【讨论】：