Я пишу расширение React Chrome, которое внедряет контент в несколько областей на разных страницах, а также имеет всплывающее окно для входа в систему пользователя
В моей функции рендеринга есть следующее:
<Provider store={store}>
{ RowDiv() }
{ isChromeExt() }
</Provider>
В этих функциях я отображаю порталы React следующим образом:
function RowDiv() {
if(window.location.href.split('/')[2] === 'foo') {
const viewport = document.getElementsByClassName('top-nav-links-container')[0];
const app = document.createElement('div');
app.id = 'ml-row';
viewport.insertAdjacentElement('afterend', app);
return (<Portal element={ document.getElementById('ml-row')}><Row /></Portal>)
}
}
function isChromeExt() {
if(window.location.href.includes("chrome-extension://")) {
return (
<Portal element={ document.getElementById('root')}>
<Dashboard>
<Login />
</Dashboard>
</Portal>
)
}
}
В моем компоненте входа в систему, который находится во всплывающем окне Chrome, когда пользователь входит в систему, я отправляю его токен и данные пользователя this.props.dispatch(login(token.access_token, user));
Это вызывает мое действие, которое вызывает мой редуктор.Они запускаются:
export function login(jwt, user) {
chrome.storage.sync.set({jwt, user});
return {
type: LOGIN,
jwt,
user,
};
}
---
if (action.type === authTypes.LOGIN) {
console.log("action Login")
return {
token: action.jwt,
user: action.user,
};
}
В моем компоненте Row я использую connect и mapStateToProps:
function mapStateToProps({ user }) {
console.log(user);
return {
token: user.token,
user: user.user,
};
}
export default connect(mapStateToProps)(Row);
Проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь входит в систему, онпохоже, не запускается в моем компоненте Row.
Если я перезагружаю страницу, где вводится Row, там есть реквизиты.
Кто-нибудь знает, почему я не могу получить избыточный код для запуска вмой компонент Row?