Hey i am new to Redux and I’m encountering an issue in my React application when attempting to redirect the user to the home page after successful login using Redux and fireBase. Despite dispatching the necessary actions to update the Redux state, I’m facing difficulties with redirection, and when inspecting the Redux state, it shows as undefined. I have verified my actions, reducers, and the usage of the useSelector hook, but the problem persists.
this my code for usersSlice
import { createSlice } from "@reduxjs/toolkit";
export const userSlice = createSlice({
name: "user",
initialState: {
currentUser: null
},
reducers: {
setUser: (state, action) => {
console.log("set user", action.payload);
state.currentUser = action.payload;
},
},
});
export const { setUser } = userSlice.actions;
export const selectUser = (state) => state.user?.currentUser; // i am using ? because it shows undefind
export default userSlice.reducer;
store
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./usersSlice";
export default configureStore({
reducer: {
user: userReducer
}
})
login
import React from "react";
import "./login.css";
import { Link } from "react-router-dom";
import { sendPasswordResetEmail, signInWithEmailAndPassword } from "firebase/auth";
import {auth} from "../config/firebase.config";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { setUser } from "../state/usersSlice";
const Login = () => {
const [emailL, setEmailL] = useState("");
const [passL, setPassL] = useState("");
const [error, setError] = useState("");
const dispatch = useDispatch();
const signIn = async (e) => {
e.preventDefault();
//console.log(email, pass, loginError)
await signInWithEmailAndPassword(auth, emailL, passL)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.log(user.email, user.uid)
// ...
alert("oged in")
dispatch(setUser({
id: user.uid,
email: user.email
}))
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
setError(errorMessage);
});
};
const forgotPass = () => {
const email = prompt("please enter your email: ");
sendPasswordResetEmail(auth, email);
alert("Email sent! check your email inbox to chnage password!!!");
}
return (
<div className="container">
<div className="login">
<form className="login-form">
<h3 className="title">SIGN IN</h3>
<div className="inputs">
<InputField
required
type={"email"}
placeholder={"email"}
className={"email"}
handleChange={(data) => setEmailL(data)}
/>
<InputField
required
type={"password"}
placeholder={"Password"}
className={"password"}
handleChange={(data) => setPassL(data)}
/>
</div>
<button type="submit" onClick={signIn} className="btn log-in-btn">
Login
</button>
<p onClick={forgotPass} className="forgot">FORGOT PASSWORD ?</p>
<p className="not-accnt">
NEED AN ACCOUNT ?{" "}
<span>
<Link className="sgn-up" to="/register">
SIGN UP.
</Link>
</span>{" "}
</p>
</form>
</div>
<p style={{ color: "red" }}>{error}</p>
</div>
);
};
const InputField = ({ placeholder, handleChange, type }) => {
const [inputValue, setInputValue] = useState("");
const handelChangeEvent = (e) => {
setInputValue(e.target.value);
handleChange(e.target.value);
};
return (
<input
required
type={type}
placeholder={placeholder}
value={inputValue}
onChange={handelChangeEvent}
className="password"
/>
);
};
export default Login;
app.js
import "./App.css";
import Login from "./loginRegister/Login";
import Register from "./loginRegister/Register";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import { selectUser } from "./state/usersSlice";
import { useSelector } from "react-redux";
function App() {
const user = useSelector(selectUser);
return (
<div>
{user ? (
<Routes>
<Route index element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Routes>
) : (
<Login />
)}
</div>
);
}
export default App;
main
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { createStore, combineReducers } from "redux";
import usersSlice from "./state/usersSlice";
import { Provider } from "react-redux";
import './index.css'
const rootReducer = combineReducers({
mySlice: usersSlice,
});
const store = createStore(rootReducer);
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store= {store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</React.StrictMode>,
)
this is redux inspect
Redux inspect shows undefined
Any insights or solutions to resolve this redirection issue would be greatly appreciated. Thank you!
