0

Всем добрый вечер. Есть условный код:

function Parent(){
 {routeMarkers} = useAppSelector((state) => state.mapSearch);
 return(
 <RouteMarkers routeMarkers={routeMarkers} />
 )
}

Cildren выглядит так:

export default function RouteMarkers({ routeMarkers }: { routeMarkers: Array<RouteMarkerType> }): JSX.Element[] {
  const newRouteMarkers: { current: Array<RouteMarkerType> } = useRef([]);
  const _routeMarkers = useRef(routeMarkers);

  _routeMarkers.current.forEach((marker, i, arr) => {
    const _marker = marker;
    const { pointId } = _marker;
    const markerIdBeforeHesh = pointId?.match(/^.*(?=#)/i)?.[0];
    const arrWithMarkerIdBeforeHesh = arr.filter(
      ({ pointId }) => pointId?.match(/^.*(?=#)/i)?.[0] === markerIdBeforeHesh,
    );
    if (arrWithMarkerIdBeforeHesh.length === 1) {
      _routeMarkers.current.splice(i, 1);
      newRouteMarkers.current.push({ ..._marker, place: 1 });
    }
  });

  return newRouteMarkers.current.map((routeMarker) => <RouteMarker {...routeMarker} key={routeMarker.pointId} />);
}

компонент получает массив с пропсами преобразует его и возвращает массив других компонентов. После того как в поле стора добавляется элемент routeMarker компонент Parent отрисовывает этот маркер. Но при следующей отработке reduccer в него почему то передается состояние где поле routeMarkers уже пустой массив. При этом ни какие экшены связанные с этим поплем не отправлялись в reduccer. Если переписать дочерний компонент вот так:

export default function RouteMarkers({ routeMarkers }: { routeMarkers: Array<RouteMarkerType> }): JSX.Element[] {
  return routeMarkers.current.map((routeMarker) => <RouteMarker {...routeMarker} key={routeMarker.pointId} />);
}

стор работает как и ожидается. Не могу понять в чем проблема. Прошу помощи.

2
  • Одно из предположений, что это происходит из-за _routeMarkers.current.splice(i, 1);. Хоть редюсер в react и отдает объект, по сути, это все тот же javaScript и идет передача ссылки на объект. Тут вы самостоятельно(в обход ваших экшенов) зануляете данные.
    – SwaD
    9 ноя 2022 в 17:42
  • Огромное спасибо дорогой и глубокоуважаемый SwaD. Вы просто спасли мне жизнь. Кто бы мог подумать что Redux допустит изменять состояние через изменение объекта ссылка на который тянется через несколько компонентов. В общем реши проблему скопировав routeMarkers через Object.assign. 10 ноя 2022 в 6:01

1 ответ 1

0

React-redux реализует хранилище данных. Однако надо помнить о некоторых "фичах" поведения и его использования.

react-redux возвращает ссылку на объект-состояние, а не клонированный объект.

Получая состояние, надо быть аккуратным с его использованием.

Если планируете манипулировать с полученными данными, склонируйте объект. Допустим операторами spread, встроеными способами(Object.assign()) или с использованием внешних библиотек(lodash к примеру).

const { routeMarkers } = useAppSelector((state) => state.mapSearch);
const [ routeMark, setRouteMark ] = useState({});

useEffect(() => {
  setRouteMark({ ...routeMarkers });
}, [routeMarkers]);

Второй нюанс, заключается в том, что смена данных в хранилище может не вызвать событий useEffect в функциональных компонентах.

Для этого необходимо клонировать состояние перед возвратом в redux. Изменить функцию возврата данных в хранилище react-redux с

const reducer = (
  state = { ...initialState },
  action: { type: string; payload: any }
) => {
  switch (action.type) {
    case 'add':
      state.data = action.payload;
      return state;
    default:
      return state;
  }

На возврат склонированнных объектов. Если есть вложенные объекты, за которым так же может наблюдать useEffect, их тоже лучше склонировать.

const reducer = (
  state = { ...initialState },
  action: { type: string; payload: any }
) => {
  switch (action.type) {
    case 'add':
      state.data = action.payload;
      return { ...state };
    default:
      return { ...state };
  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.