react-redux useEffectの無限レンダリングをどうにかしたい

現在、あるコンポーネントで管理している、state(useState)をreduxでの管理に書き換えているところです。
######今まで：値の更新をしたときはsetStateをして更新し、取得するときはそのままstateを取得

######目標：値の更新はredux(redux-thunk)のdispatchを使い、まず非同期でサーバーサイドの値を更新してから、同じくstoreの値を更新し、取得するときは一度先にstoreにサーバーサイドのデータをfetchして更新してからuseSelectorを使い取得します。

理由は以下の二つです。↓
######１．コンポーネントが更新されたとき、または任意のタイミングで非同期でサーバーサイドから値を取得し、stateの更新をしたい。

######２、扱う値がコンポーネント全体で使うのでreduxの方が適している。

###【質問】
このソースコードのuseEffectの部分(fetchCardsというサーバーサイドのデーターをstoreにフェッチする関数をdispatchしています)で無限にレンダリングが発生して重くなり動かなくなります。

######１．第二引数の依存配列に渡すべき値はどうすべきでしょうか。

useStateのcardsを渡すと、なぜか無限にレンダリングされず、storeを更新すると一度のレンダリングで済みます。
今回はreduxで管理したいので、最終的には、useStateの[cards,setCards]を無くす予定です。
そのため、
#####２、useEffectの第二引数に、storeからselectorを使って取得したrCardsを渡したところ、rCardsに変更はないのに、レンダリングが止まらなくなりました、これはどういった理由なのでしょうか。

以上二つの質問にお答えしていただけると助かります。
まだまだuseEffectについてうまく理解していない上につたない文章で申し訳ありません。
何卒宜しくお願い致します。

説明に必要ない部分は省いてソースコード表示しています。

javaScript
1const PositionMap= () => {
2    const dispatch = useDispatch();
3    const selector = useSelector(state => state);
4    const [cards,setCards] = useState([])
5
6    const rCards = getCards(selector);
7    
8    const generateCard = (e) => {
9        const newPosition = {
10            x:e.offsetX,
11            y:e.offsetY
12        }
13        dispatch(addCard("test",newPosition.x,newPosition.y,100,100));
14        setCards(cards => [...cards,newPosition])
15    }
16
17    useEffect(() => {
18        console.log('fetchEffect!')
19        dispatch(fetchCards())
20    },[？？？？？？？？])<-ここの依存配列に何かを入れて無限レンダリングを止めたい。
21もしくはほかの方法を知りたい。
22空配列は初回のみになってしまうのでNG。
23useStateのstate、useStateを入れるのもNG
24（ここで扱う値はすべてグル―バルで管理かつ非同期処理を絡めてサーバサイドから取得や更新をするため最終的にreact-redux(redux-thunk)に書き換えるため）

【質問への追記】getCardsについて
getCardsは現在のstateの中身のcardsのみを取り出し返します。

javascript
1import {createSelector} from 'reselect';
2
3const pMapSelector = state => state;
4
5export const getCards = createSelector(
6    [pMapSelector],
7    state => state.pMap.cards
8)
9
10/*stateの初期値です。
11const initialState = {
12
13    pMap:{
14        cards:[]
15    }
16
17}
18*/
19

maisumakun

2021/02/11 01:41

getCardsはどのような関数なのでしょうか？

titizoukin

2021/02/11 01:47

追記の依頼ありがとうございます。質問本文にgetCardsのソースコードを追記させていただきました。 getCardsは現在のstateの中身のcardsのみを取り出し返します。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

useEffectの第二引数はrCardsで良いと思いますが、getCardsの返り値が毎回生成されている場合は違う値として比較されるため無限レンダリングになってしまうと思います

shallowEqualを使えば回避できるのではないでしょうか

jsx
1import { useSelector, shallowEqual } from 'react-redux'
2
3const selector = useSelector(state => state, shallowEqual);
4
5const rCards = getCards(selector);
6
7useEffect(() => {
8  console.log('fetchEffect!')
9  dispatch(fetchCards())
10},[rCards])