Javascript 将dom操作放在redux reducer中是个坏主意吗？

我有几个操作使用同一个reducer，而不是在每个操作中都有dom操作，我只想在共享reducer中添加一次。我知道缩减器是纯的（返回的数据仍然是纯的），但这是某种反模式还是一种可接受的策略

 case APPEND_POSTS:
      !payload.length &&
        document.getElementById('posts-cont').classList.add('no-more-posts'); // this 
      const total = state.posts.length + payload.length;
      const limit = total > posts_to_keep_limit ? 50 : 0;
      return {
        ...state,
        posts: [...state.posts.slice(limit), ...payload],
        loading: false,
      };
    ```

重演行动

 case APPEND_POSTS:
      // you don't need to use below code.
      // !payload.length && document.getElementById('posts-cont').classList.add('no-more-posts'); // this 
      const total = state.posts.length + payload.length;
      const limit = total > posts_to_keep_limit ? 50 : 0;
      return {
        ...state,
        posts: [...state.posts.slice(limit), ...payload],
        nomore: true,
        loading: false,
      };

您的组件

function YourComp(props){
  const state = useSelector(...); 

  return ( <div id="posts-cont" className={state.nomore ? 'no-more-posts' : ''} > {...}</div>

 
} 

function YourComp（道具）{
常量状态=使用选择器（…）；
返回（{…}
} 

我知道缩减器是纯的（返回的数据仍然是纯的），但这是某种反模式还是一种可接受的策略

 case APPEND_POSTS:
      !payload.length &&
        document.getElementById('posts-cont').classList.add('no-more-posts'); // this 
      const total = state.posts.length + payload.length;
      const limit = total > posts_to_keep_limit ? 50 : 0;
      return {
        ...state,
        posts: [...state.posts.slice(limit), ...payload],
        loading: false,
      };
    ```

返回的数据是纯的，但您引入了DOM变异形式的副作用。因此，此缩减器不是纯的

---

这确实是一种反模式，因为现在，组件render

posts cont

项与此缩减器有一个不可见的耦合。这使您的代码库更难读取和调试。

jinongun的建议很好：让组件的类名使用选择器从存储的状态派生其值。至于一般问题

我有几个动作使用相同的减速器，而不是 在每个操作中都有一个dom操作，我只想添加它 一旦进入我的共享减速机

不要在减速器中进行DOM操作。 不要做任何非纯计算的操作

但您可以创建一个总是调用副作用的动作创建者（使用）：

---

这看起来很糟糕…你应该用stateDOM操作来更改类，即使在组件中也应该避免（98%的情况），更不用说在reducer中了。如果某些效果必须与动作一起运行，那么将它们放在动作创建者中或作为中间件。