У меня есть простой старый класс цветов, который я использовал во многих местах в моем приложении:
const Color = {
[...]
cardBackground: '#f8f8f8',
sidebarBackground: '#eeeeee',
viewportBackground: '#D8D8D8',
[...]
}
export default Color;
Это просто работает. Теперь я хочу реализовать поддержку темного режима без изменения внешних модификаций кода. Я решил подключиться к состоянию, прочитать его напрямую и вернуть в getter соответствующее значение:
const Color = {
[...]
cardBackground: '#f8f8f8',
get sidebarBackground(){ return lightDark('#eeeeee','#222222') },
viewportBackground: '#D8D8D8',
[...]
}
export default Color;
Где lightDark определяется как:
export function lightDark<T1, T2>(light:T1, dark:T2){
return themeSelector(store.getState()) == 'dark' ? dark : light;
}
Теперь я неожиданно получаю undefined ошибка в первую очередь при доступе к Color (не обязательно Color.sidebarBackground, но что-либо внутри Color)
Если я изменю код для удаления доступа к состоянию (только для тестирования) , он начинает работать:
export function lightDark<T1, T2>(light:T1, dark:T2){
return themeSelector({session:{theme:'dark'}} as any) == 'dark' ? dark : light;
}
Что происходит на Земле?
Для уточнения, это точная ошибка:
TypeError: Cannot read property 'title' of undefined
, где я пытаюсь получить доступ Color.title, который, по-видимому, является первой ссылкой на Color в моем приложении (таким образом, title не имеет значения).
Я также понял, что в тот момент, когда я ссылаюсь на store в любом Кстати, все в файле, где определено Color, Color становится неопределенным. Даже console.log(store); приводит к тому, что Color становится неопределенным.