reduxのstateから取り出した値はコンポーネントで変更してはならない

現象

ComponentAでstate.datasを使用しているとき、
ComponentBの中でstate.datasの値（または配列）を操作すると、ComponentAが正しくレンダリングされない。

対処法

Object.assignでstate.datasをコピーする。

---

state.datasは別のコンポーネントでも使用している。
そういった場合、下記のようにコンポーネント内でstate.datasを操作すると、state.datasを使用している別コンポーネントのレンダリングが正しく行われない。
(そもそも、stateの値の変更はreducerのみが行うため、コンポーネント内で操作することが間違っている）

import React from 'react';
import { useSelector } from 'react-redux';

const ComponentB = () => {
  const datas = useSelector((state) => state.datas);
  const reverseDatas = datas.reverse();

  return (
    <>
      {reverseDatas.map(data => {
        // レンダリング
      })}
    </>
  );
};

export default ComponentB;

コンポーネント内でstateの値を操作したいときは事前にObject.assignでコピーする

import React from 'react';
import { useSelector } from 'react-redux';

const ComponentB = () => {
  const datas = Object.assign([], useSelector((state) => state.datas));
  const reverseDatas = datas.reverse();

  return (
    <>
      {reverseDatas.map(data => {
        // レンダリング
      })}
    </>
  );
};

export default ComponentB;

reduxにはvuexにおけるgettersみたいな概念がなさそうなので、
stateから条件に合ったデータの抽出とか書く場所に悩む。