如何修复由 react-redux 中的循环依赖引起的“不变违规”

Posted 2023-02-22

技术标签:

【中文标题】如何修复由 react-redux 中的循环依赖引起的“不变违规”【英文标题】：How to fix 'Invariant Violation' caused by cyclic dependencies in react-redux 【发布时间】：2020-03-07 07:14:17 【问题描述】：

我有一个这样的 React 项目：

这是一个简单的应用程序。 Dashboard 有一个 UserListContainer，其中包含一个 UserList，其中列出了四个用户及其 ID 和名称。 UserList 从Data.ts获取用户

应用程序本身运行良好并显示四个用户。但是，当我尝试使用 酶浅渲染 测试 UserList 时，测试会给我以下错误消息：

Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined
      at invariant (node_modules/invariant/invariant.js:40:15)
      at wrapWithConnect (node_modules/react-redux/lib/components/connectAdvanced.js:97:33)
      at Object.<anonymous> (src/Users/UserListContainer.tsx:4:34)
      at Object.<anonymous> (src/Users/index.ts:1:1)
      at Object.<anonymous> (src/Dashboard/Dashboard.tsx:2:1)
      at Object.<anonymous> (src/Dashboard/index.ts:1:1)
      at Object.<anonymous> (src/Users/UserList.tsx:2:1)
      at Object.<anonymous> (src/Users/__tests__/UserList.test.tsx:3:1)

问题基本上是，即使我们在浅层渲染UserList 时不使用仪表板，React 仍然会尝试构建它。我猜这是因为我们通过Dashboard 索引访问Data，所以React 也会尝试解析Dashboard 及其导入，即UserListContainer，因为它们是通过同一个索引文件导出的。当我直接导入用户而不是通过索引时，问题就消失了。

我们通过打破循环依赖解决了这个问题，但如果我再次遇到错误，我想知道其他方法来解决它。我还想了解为什么 Web 应用程序似乎仍然可以正常工作，而测试却失败了。

另外，在使用酶浅渲染时，有没有办法防止 React 解析导入和导出？

用户/tests/UserList.test.tsx

test("reproduce the problem", () => 
  const wrapper = shallow(<UserList />)
  console.log(wrapper)
  expect(1).toBe(1)
)

用户/UserList.tsx

import  Data  from "../Dashboard"
export const UserList: React.FC = () => (
  <React.Fragment>
    Data.users.map(user => (
      <div>
        <code>user.id - </code>
        <code>user.name</code>
      </div>
    ))
  </React.Fragment>
)

仪表板/index.ts

export  Dashboard  from "./Dashboard" // not used but still resolved
export  Data  from "./Data" // actually used

仪表板/Data.ts

export const Data = 
  users: [
     id: "user1", name: "Albert" ,
     id: "user2", name: "Bertha" ,
     id: "user3", name: "Chloe" ,
     id: "user4", name: "Doug" 
  ]

仪表板/仪表板.tsx

import  UserListContainer  from "../Users"
export const Dashboard: React.FC = () => 
  return <UserListContainer />

用户/UserListContainer.tsx

import  UserList  from "./UserList"
export const UserListContainer = connect()(UserList)

【问题讨论】：

【参考方案1】：

修复它的一种方法是重新排序仪表板文件中的导入：

export  Data  from "./Data" // actually used 
export  Dashboard  from "./Dashboard" // not used but still resolved

Web 应用程序在大多数情况下都可以工作，因为它将从您的 index.tsx 文件（或任何您的条目文件名）开始解析并从那里开始。另一方面，Jest 从您的测试文件开始，只解析那些导入（您可以在这里找到为什么会发生这种情况的一个很好的解释：https://railsware.com/blog/how-to-analyze-circular-dependencies-in-es6/）。

我们在项目中遇到了类似的问题，不幸的是，除了重新排序导入和更好地构建文件之外，没有其他解决方案。

你也可以做的一个“hack”是添加：