Я пытаюсь получить UID текущего пользователя в firebase в моем корневом файле (App.js), но я столкнулся с проблемой, связанной с response-redux, хотя я завернул Provider и установил хранилище. Кстати, я использую redux-toolkit. Что мне здесь не хватает? Спасибо за ответ.
Ниже мой App.js
import { StrictMode, useEffect } from 'react'
import { Provider } from 'react-redux';
import { useDispatch } from 'react-redux';
import { getCurrentUser } from 'store/slices/authSlice';
import store from 'store';
import routes from 'routes/routes';
import PrivateRoute from 'routes/PrivateRoutes';
const App = () => {
const dispatch = useDispatch();
useEffect(() => {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
var uid = user;
console.info(uid);
dispatch(getCurrentUser(uid))
} else {
// User is signed out
// ...
}
});
}, [dispatch]);
return (
<StrictMode>
<Provider store = {store}>
<Router>
<Switch>
{routes.map((route, i) => (
route.auth ? (
<PrivateRoute
key = {i}
exact
path = {route.path}
component = {route.component}
/>
) : (
<Route
key = {i}
exact
path = {route.path}
component = {route.component}
/>
)
))}
</Switch>
</Router>
</Provider>
</StrictMode>
);
}
export default App;
Либо поместите ваш <Provider> в следующий компонент компонента App, либо сделайте firebase.auth в дочернем элементе <App >.
Проверьте мой ответ @ learn2code Удачного кодирования :)





Проблема в том, что вы пытаетесь использовать useDispatch в своем основном компоненте, который не упакован в Provider. Вы должны создать компонент навигатора или маршрутизатора и сделать это внутри него.
App должен быть заключен в провайдер, поскольку вы используете в нем useDispatch. Сейчас это всего лишь ребенок. Provider устанавливает контекст так, чтобы к нему могли иметь доступ только его дочерние элементы, но не родитель.
Пытаться:
import { StrictMode, useEffect } from 'react'
import { Provider } from 'react-redux';
import { useDispatch } from 'react-redux';
import { getCurrentUser } from 'store/slices/authSlice';
import store from 'store';
import routes from 'routes/routes';
import PrivateRoute from 'routes/PrivateRoutes';
const AppWrapper = () => {
const store = createStore(rootReducer);
return (
<Provider store = {store}> // Set context
<App /> // Now App has access to context
</Provider>
)
}
const App = () => {
const dispatch = useDispatch();
useEffect(() => {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
var uid = user;
console.info(uid);
dispatch(getCurrentUser(uid))
} else {
// User is signed out
// ...
}
});
}, [dispatch]);
return (
<StrictMode>
<Provider store = {store}>
<Router>
<Switch>
{routes.map((route, i) => (
route.auth ? (
<PrivateRoute
key = {i}
exact
path = {route.path}
component = {route.component}
/>
) : (
<Route
key = {i}
exact
path = {route.path}
component = {route.component}
/>
)
))}
</Switch>
</Router>
</Provider>
</StrictMode>
);
}
export default App;
Можете ли вы поделиться файлом
store