Блог

Я новичок в мире react native и работаю над новым проектом с хранилищем (управление с помощью redux).

Я столкнулся с проблемой с пользовательскими перехватами и useEffect

вот мои пользовательские перехваты

 const useTheme = () => {
  const [activeTheme, setActiveTheme] = useState();
  const { id: universID, defaultTheme: universDefaultTheme } = useSelector(
    (state) => state.univers
  );
  const { theme } = useSelector((state) => state);
  const { themes: activeThemes } = useSelector((state) => state.settings);
  const dispatch = useDispatch();

  //set theme when univers change
  useEffect(() => {
    console.log('TODO TOO MANY CALLS!!!!!', universID);
    if (universID) {
       setTheme(
         activeThemes.find((theme) => theme.univers === universID)?.theme
       );
    }
  }, [universID]);

  //get active theme of current univers
  useEffect(() => {
    setActiveTheme(
      activeThemes.find((theme) => theme.univers === universID)?.theme
    );
  }, [activeThemes]);

  ... rest of code ...

  return {
    theme,
    activeTheme,
    setTheme,
  };
}
 

в компонентах, которые я использую

   const {
    theme: { colors },
  } = useTheme();
 

Моя проблема в том, что при каждом импорте useEffect(()=>{},[universID]) является триггером. UniversID поступают из redux store.

Если я правильно понимаю, когда я импортирую useTheme(), ссылка на universID изменяется, потому что создается копия universID из хранилища и ссылка изменяется.

если я передаю universID в качестве аргументов для перехватов useTheme, проблем нет, ссылка на причину та же. Но если я это сделаю, мне нужно создать useSelector (universID) для всех компонентов, которые импортируют перехваты useTheme.

1. Мое понимание механики хорошее?
2. Есть способ получить universID из хранилища с одной и той же ссылкой при каждом импорте, чтобы не запускать useEffect(,[universID]) при каждом импорте? без передачи universID в качестве аргументов useTheme (т.Е. useRef, useCallback)?

Спасибо, что потратили время на чтение (или, лучше, на ответ ;))