Почему происходит ре-рендер при изменении массива в useSelector?

Question

[bzotsss]

Всем привет у меня есть компонент который меняет массив в redux через dispatch , на тот же самый массив

import React from 'react';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { setCountAC } from './redux/mainReducer';
const SecondComponent = () => {
    const count = useSelector(store=>store.mainInfo.count)
    const dispatch = useDispatch()
    return (
        <div onClick={() => dispatch(setCountAC([2,3,4]))}>
            {count}
        </div>
    );
}
SecondComponent.whyDidYouRender = true;
export default SecondComponent;

Вот код редюсера

const SET_COUNT = "SET_COUNT";
const initialState = {
  count:[
    1,2,3
  ]
};
export const mainReducer = (state = initialState, action) => {
  const copyState = { ...state };
  if (action.type === SET_COUNT) {
      copyState.count = [...state.count]
    return {
      ...copyState,
    };
  }
  return state;
};
export const setCountAC = (count) => ({type:SET_COUNT,count:count})

Вопрос , почему при изменении массива происходит ре-рендер а при изменении примитивного значения нет ? Связано ли это с тем что массив = обьект ?

Answer 1

[Alexandroppolus]

надо проверять, что массивы не равны. Сделал поверхностное сравнение. Возможно, понадобится ещё и вглубь элементов, но это детали. В общем, сравнивай массивы.

const isShallowEqualArrays = (arr1, arr2) =>
    arr1 === arr2 || (arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]));

export const mainReducer = (state = initialState, action) => {
    if (action.type === SET_COUNT) {
        if (!isShallowEqualArrays(state.count, action.count)) {
            return {
                ...state,
                count: action.count
            };
        }
    }
    return state;
};

Comments

[bzotsss]

Спасибо!

Answer 2

[Vladimir Lewandowski]

Связано ли это с тем что массив = обьект ?

Да.

Comments

[bzotsss]

Тобеж меняется ссылка на массив как я понимаю , можно ли как нибудь сохранить ссылку на массив ?

[Alexandroppolus]

bzotsss, просто не делать copyState.count = [...state.count], тогда массив сохранится )
Хотя там наверно подразумевался action.count?

[bzotsss]

Да,всё верно там должен быть [...action.count] . но при помощи copyState.count = [...state.count] я сетаю массив в стейт редакса . Как мне без этого действия это сделать то ?:)