@bzotsss

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

Всем привет у меня есть компонент который меняет массив в 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})

Вопрос , почему при изменении массива происходит ре-рендер а при изменении примитивного значения нет ? Связано ли это с тем что массив = обьект ?
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
Alexandroppolus
@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;
};
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
vovaspace
@vovaspace
Frontend Developer
Связано ли это с тем что массив = обьект ?

Да.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы