ReactJs:当道具发生变化时，如何使根组件重新应答

Question

我有一个管理通知的组件NotificationToast
当用户通过身份验证时，我需要始终被呈现。

这就是我所做的：

class App extends Component {
render() {
const state = store.getState();
const { isAuthenticated } = state.auth;
return (
<Provider store={store}>
<BrowserRouter basename="/">    
<Switch>
<PublicRoute path="/register-page" component={RegisterPage} />
<PrivateRoute path="/profile-page" component={ProfilePage} />
<Redirect to="/home" />
</Switch>
{isAuthenticated && (
<div>
<NotificationToast />
</div>
)}
</BrowserRouter>
</Provider>
);
}
}
export default App;

问题是，这在以下场景中不起作用：

1. 用户尚未登录
2. 所以他没有通过身份验证。所以state.auth.isAuthenticated就是false
3. 当他登录时，state.auth.isAuthenticated被设置为true
4. 但是，问题是App没有检测到这种变化，因此它不会被重新绘制
5. 因此，NotificationToast不会被渲染
6. 因此，通知系统无法工作

这在用户登录后刷新页面时有效，因为state.auth.isAuthenticated从一开始就是true。

这是因为这个代码：

if (localStorage.jwtToken) {
// Set auth token header auth
setAuthToken(localStorage.jwtToken);
// Decode token and get user info and expiration
const decoded = jwt_decode(localStorage.jwtToken);
// Set User and is Authenticated
store.dispatch(setCurrentUser(decoded));
// Now if you reload a page, if the user has already logged-in you will still have his info in he state
store.dispatch(clearCurrentProfile());
// Check for expired token
const currentTime = Date.now() / 1000;
if (decoded.exp < currentTime) {
store.dispatch(logoutUser());
store.dispatch(clearCurrentProfile());
// Redirect to login
window.location.href = "/login";
}
}

它检查用户是否已经登录，如果已经登录，则将state.auth.isAuthenticated设置为true。

有什么建议吗？

Answer 1

useStore用于检索存储。但这种存储访问只能用于存储操作，如更换减速器。当存储更改时，以这种方式访问存储的组件不会更新。

请使用"；useSelector"；

const isAuthenticated = useSelector(state => state.auth)