为什么我没有从react redux状态获得更新的值

Question

我是一个初学者，正在学习react js。我做了一个粗糙的应用程序来练习。我正在为此应用程序实现firebase以进行身份验证。但问题是我没有得到更新的值。

索引.jsx

在第11行，我没有得到最新的user值。

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ShowBooks from '../pages/ShowBooks';
import AddBook from '../pages/AddBook';
import EditBook from '../pages/EditBook';
import Login from '../pages/Login';
import Navbar from '../components/Navbar';
const Index = () => {
const { user } = useSelector(state => state.case);
let routes;
if (user === null || user === undefined) {
routes = (
<Routes>
<Route path="/login" element={<Login />} />
<Route path="*" element={<Navigate to="/login" replace={true} />} />
</Routes>
);
} else {
routes = (
<>
<Navbar />
<Routes>
<Route path="/" element={<ShowBooks />} />
<Route path="/show-books" element={<ShowBooks />} />
<Route path="/add-book" element={<AddBook />} />
<Route path="/edit-book" element={<EditBook />} />
<Route path="/login" element={<Login />} />
<Route path="*" element={<Navigate to="/" replace={true} />} />
</Routes>
</>
);
}
return <BrowserRouter>{routes}</BrowserRouter>;
};
export default Index;

这是BooksSlice.jsx:的代码

import { createSlice } from '@reduxjs/toolkit';
import { v4 as uuidv4 } from 'uuid';
const initialBooks = {
books: [
{
id: uuidv4(),
title: 'Ordinary Differential Equation',
author: 'Prof. Md. Abu Yousuf',
},
{ id: uuidv4(), title: 'CSE Kit', author: 'Gyan Bitan' },
],
user: JSON.parse(localStorage.getItem('user')) || null,
};
export const BooksSlice = createSlice({
name: 'books',
initialState: initialBooks,
reducers: {
showBooks: state => state,
addBook: (state, action) => {
state.books.push(action.payload);
},
deleteBook: (state, action) => {
const id = action.payload;
state.books = state.books.filter(book => book.id !== id);
},
updateBook: (state, action) => {
const { id, title, author } = action.payload;
const isBookExist = state.books.filter(book => book.id === id);
if (isBookExist) {
isBookExist[0].title = title;
isBookExist[0].author = author;
}
},
},
});
export const { showBooks, addBook, deleteBook, updateBook } =
BooksSlice.actions;
export default BooksSlice.reducer;

这是store.js的代码

import { configureStore } from '@reduxjs/toolkit';
import booksReducer from './BooksSlice';
const store = configureStore({
reducer: {
case: booksReducer,
},
});
export default store;

这里是Login.jsx代码：

import React, { useState } from 'react';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../firebase/firebase';
import { useNavigate } from 'react-router-dom';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState(false);
const navigate = useNavigate();
// Login Handler Function
const loginHandler = event => {
event.preventDefault();
signInWithEmailAndPassword(auth, email, password)
.then(userCredential => {
// Signed in
const user = userCredential.user;
localStorage.setItem('user', JSON.stringify(user));
navigate('/show-books', { replace: true });
})
.catch(error => {
// const errorCode = error.code;
// const errorMessage = error.message;
setError(true);
});
};
return (
<div className="container pt-5">
{error && (
<p className="text-danger text-center">Wrong email or password!</p>
)}
<form className="w-75 mx-auto" onSubmit={loginHandler}>
<div className="form-floating mb-3">
<input
type="email"
className="form-control"
placeholder="Email"
value={email}
onChange={event => setEmail(event.target.value)}
required
/>
<label>Email</label>
</div>
<div className="form-floating my-3">
<input
type="password"
className="form-control"
placeholder="Password"
value={password}
onChange={event => setPassword(event.target.value)}
required
/>
<label>Password</label>
</div>
<button type="submit" className="btn btn-dark btn-lg text-light">
Log In
</button>
</form>
</div>
);
};
export default Login;

如何获取Index.jsx上更新的user值？

Answer 1

您需要创建一个；登录"；操作，并在用户进行身份验证时将经过身份验证的用户对象分派到存储。

示例：

export const BooksSlice = createSlice({
name: 'books',
initialState: initialBooks,
reducers: {
...
login: (state, action) => {
state.user = action.payload;
localStorage.setItem('user', JSON.stringify(action.payload));
},
},
});
export const {
showBooks,
addBook,
deleteBook,
updateBook,
login,
} = BooksSlice.actions;
export default BooksSlice.reducer;

import React, { useState } from 'react';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { useDispatch } from 'react-redux';
import { auth } from '../firebase/firebase';
import { useNavigate } from 'react-router-dom';
import { login } from '../path/to/BooksSlice';
const Login = () => {
...
const navigate = useNavigate();
const dispatch = useDispatch();
// Login Handler Function
const loginHandler = event => {
event.preventDefault();
signInWithEmailAndPassword(auth, email, password)
.then(userCredential => {
// Signed in
const user = userCredential.user;
dispatch(login(user)); // <-- dispatch user object to store
navigate('/show-books', { replace: true });
})
.catch(error => {
// const errorCode = error.code;
// const errorMessage = error.message;
setError(true);
});
};
return (
...
);
};