HOC Redux Dispatch вызывается после вызова дочернего компонента React componentDidMount
У меня есть компонент более высокого порядка (HOC), который используется для авторизации и обновления пользовательских сеансов.
Это RequireAuth HOC и его componentWillMount
componentWillMount() {
console.info('HOC componentWillMount');
// checks with authorizer that token is valid if not refresh token
getUserFromLocalStorage()
// update redux with new refresh token
.then(data => {
console.info('getUserFromLocalStorage')
this.props.setUserToReduxState(data);
console.info(
'user sucess retrieved and user setUserToReduxState: ',
data
);
})
.catch(() => {
logoutUserFromReduxState();
});
}
}
Это мой маршрутный звонок
<Route exact path = "/devices" component = {RequireAuth(Devices)} />
и вот мой componentDidMount для компонента Devices
componentDidMount() {
console.info('componentDidMount')
// calls api
this.loadData();
}
Этот дочерний компонент вызывает API, которому требуется токен. Однако, когда токен обновляется, он обновляется перед вызовом API в компоненте устройств, но действие redux, которое возвращается из обещания '.then' в HOC, не обновляет состояние redux перед вызовом api в дочернем компоненте .
Есть ли способ убедиться, что токен находится в состоянии обновления / сокращения до того, как ребенок попытается вызвать API?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, вы можете добавить условие внутри вашего HOC, чтобы не отображать ваш «расширенный компонент» - в вашем случае Devices до тех пор, пока setUserToReduxState не будет разрешен с помощью токена пользователя. только после установки токена пользователя ваш компонент Devices отобразит метод loadDate.
например - вы можете сопоставить состояние вашего пользователя с переменной. Если пользователь не существует - не визуализируйте компонент, который вы передаете в HOC.
Обновлено: (добавлен фрагмент кода)
// In your render method get the current user from redux - see mapStateToProps functoion
render(){
const { user } = this.props;
return (
return (
<div>
{
user && user.token
? <Component {...this.props} />
: null // Here you can replace this with spinner if you want..
}
</div>
)
)
}
const mapStateToProps = (state) => ({
user: state.auth.user
})
Теперь, когда пользователь настроен, ваш компонент будет повторно отрисован, а компонент Devices вызовет метод loadData, когда токен будет установлен точно.
Это хороший ответ. Вы могли бы дать отличный ответ, включив пример кода на основе кода OPs
@tsahnar спасибо за это. Можете ли вы хоть как-то доказать пример? Спасибо
Я понимаю, в этом есть большой смысл. После аутентификации у них появляется токен, который обновляется каждый час, а код меняется. Есть ли способ убедиться, что новый обновленный токен используется для вызова API? В настоящий момент, если токен обновляется, redux не будет обновлять состояние до срабатывания componentDidMount в дочернем компоненте. Приветствую @tsahnar
показать загрузочный счетчик или что-то в этом роде во время получения токена вместо того, чтобы сразу монтировать дочерний компонент