React - 在减速器中缓存数据？

Question

总结

在 reducer 中更新缓存好不好？我的意思是，是否可以在我的前端的每个部分（组件、屏幕、挂钩、帮助程序...）中更新缓存，还是应该将此行为委托给系统的特定部分？

简介

在我的应用中，每个用户都有一个字段“totalFollowers”。

我将每个用户的数据存储在 React Context 的状态中。为了根据之前的状态执行复杂而纯粹的更新，我使用了 reducer。

此外，我还实现了内存中的 LRU 缓存，只是为了避免不必要的数据库请求并提高用户体验/性能。在这个缓存中，我存储了一些数据，这些数据也包含在我谈到的 React 上下文中......所以，在双方，数据必须相等。

当当前用户关注他时，我正在更新特定用户的 totalFollowers 字段，在我的减速器中，我有以下内容：

export default (otherUsers, action) => {   
    switch (action.type) {
       case "follow-user": {
          const { userId, isFollowing } = action;

          const prevUserData = otherUsers.get(userId);

          return new Map([
             ...otherUsers,
            [
                userId,
                {
                   ...prevUserData,
                   totalFollowers: prevUserData.totalFollowers + (isFollowing ? 1 : -1)
                 ]
            ]
         );
       }

       ...
    }
}

问题

正如我之前所说...我的缓存有一些数据也包含在上下文中（使用我描述的 reducer），“totalFollowers”就是其中之一。

如果我的 reducer 让我能够以本机/原子方式访问状态，我认为在其中更新我的缓存是个好主意。但是，我读过减速器的唯一目的是更新状态......我很害怕，因为我更新减速器内部缓存的想法可能是一种反模式（避免纯函数内部的副作用）

你怎么看？在 reducer 中执行缓存更新是否“正确”？

import { usersCache } from "../../services/firebase/api/users"

export default (otherUsers, action) => {   
    switch (action.type) {
       case "follow-user": {
          const { userId, isFollowing } = action;

          const prevUserData = otherUsers.get(userId);

          const newTotalFollowers = prevUserData.totalFollowers + (isFollowing ? 1 : -1);

          usersCache.updateUser(userId, { totalFollowers: newTotalFollowers }); // merge update

          return new Map([
             ...otherUsers,
            [
                userId,
                {
                   ...prevUserData,
                   totalFollowers: newTotalFollowers
                 ]
            ]
         );
       }

       ...
    }
}

Answer 1

缓存和reducer是两个不同的东西。

减速器

只有当你想构建一个迷你状态机时，你才会选择使用 reducer。但是即使这样做也有其自身的问题，通常对状态的任何属性的每次更新都应该触发更新。因此，reducer 与否主要取决于您正在构建的逻辑是否真正压缩（或扭曲）在一组相关属性中。

缓存

我有一种直觉，你比我更了解缓存。所以我会跳过这部分。您使用缓存来确保在满足相同条件时可以快速返回内容，并且您还想确保至少有两个以上的条件。不然就浪费了。

上下文

您也提到了上下文，但上下文也不同。它确保您可以共享价值。但棘手的部分是，每当上下文值因状态变化而发生变化时，它都会渲染其下的所有子项。

两美分

通常你会认为缓存是对reducer（或上下文）很好的补充。但是这里的好处是缓存，例如它可以节省跳过计算的时间。

但不要赌渲染。即使从内存中获取，连接到 reducer 或上下文的值仍然会改变！这意味着您仍然可以通过缓存获得 100% 的重新渲染。

我想说的是，缓存是一个与 React 无关的概念。如果你应用它，你只会得到它自己的好处，而不要期望其他好处。