Redux Persist - 无法读取 null 的属性(读取"用户")

Question

大家好，我正在尝试使用MERN建立一个电子商务项目，但是我在redux-persist方面遇到了一些困难。

在App.jsx中，useSelector不从状态

读取user

Property 'user' does not exist on type 'DefaultRootState'

同样，在requestMethod中，TOKEN不读取user，它说"cannot read property of null ("user")。在使用redux-persist之前，注册和登录工作。

我张贴了代码，我认为有一些错误，但如果你认为问题来自其他地方，我可以添加这些文件了。谢谢你！

Package.json

"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@reduxjs/toolkit": "^1.6.2",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.4",
"json-server": "^0.16.3",
"mongodb": "^4.1.3",
"mongoose": "^6.0.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-modal": "^3.14.3",
"react-redux": "^7.2.5",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-stripe-checkout": "^2.6.3",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"reduxjs-toolkit-persist": "^7.0.7",
"shortid": "^2.2.16",
"styled-components": "^5.3.1",
"web-vitals": "^1.1.2"
},

Index.jsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { store, persistor } from "./redux/store";
import { PersistGate } from 'redux-persist/integration/react'
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById("root")
);

App.jsx

const App = () => {
const user = useSelector((state) => state.user.currentUser);
return (
<Router>
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route path="/products/:category">
<ProductList/>
</Route>
<Route path="/product/:id">
<Product />
</Route>
<Route path="/cart">
<Cart/>
</Route>
<Route path="/success">
<Success/>
</Route>
<Route path="/login">
{user ? <Redirect to ="/"/> : <Login/>}
<Login/>
</Route>
<Route path="/register">
{user ? <Redirect to ="/"/> : <Register/>}

state.user

Object
cart:
products: []
quantity: 0
total: 0
[[Prototype]]: Object
user:
currentUser: {_id: '616001631a1375942f6d7dd9', username: 'admin', email: '[e-mail]', isAdmin: true, createdAt: '2021-10-08T08:29:23.827Z', …}
error: false
isFetching: false
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
_persist:
rehydrated: true
version: 1
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Store.js

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import cartReducer from "./cartRedux";
import userReducer from "./userRedux";
import {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
key: "root",
version: 1,
storage,
};
const rootReducer = combineReducers({ user: userReducer, cart: cartReducer })
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = () => configureStore({
reducer:
persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
})
})

export let persistor = persistStore(configureStore);

requestMethods.js

import axios from "axios";
const BASE_URL = "http://localhost:5000/api/";
const TOKEN =
JSON.parse(JSON.parse(localStorage.getItem('persist:root')).user).currentUser
.accessToken || "";
export const publicRequest = axios.create({
baseURL: BASE_URL,
});
export const userRequest = axios.create({
baseURL: BASE_URL,
header: { token: `Bearer ${TOKEN}` },
});

用户回来的

import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user",
initialState: {
currentUser: null,
isFetching: false,
error: false,
},
reducers: {
loginStart: (state) => {
state.isFetching = true;
},
loginSuccess: (state, action) => {
state.isFetching = false;
state.currentUser = action.payload;
},
loginFailure: (state) => {
state.isFetching = false;
state.error = true;
},
},
});
export const { loginStart, loginSuccess, loginFailure } = userSlice.actions;
export default userSlice.reducer;

Answer 1

您的实现有一些小问题。让我们回顾一下:

首先，您使用选择器从状态中获得user对象，您的user变量(在App组件中)现在是一个对象。

const yourStateObject = {
user: {
currentUser: {_id: '616001631a1375942f6d7dd9', username: 'admin', email: '[e-mail]', isAdmin: true, createdAt: '2021-10-08T08:29:23.827Z', ...}
}
}

现在，看看你的选择器的结果:

const user = useSelector(state => state.user.currentUser)
console.log(user) // {_id: '616001631a1375942f6d7dd9', username: 'admin', email: '[e-mail]', isAdmin: true, createdAt: '2021-10-08T08:29:23.827Z', ...}

到目前为止，一切顺利，但在Router中，您正在尝试使用三元操作符检查user对象。

考虑这个例子:

const myObject = {}
console.log(myObject ? "Yes this is an object" : "Nothing exist") 
console.log(myAnotherObject ? "Yes this is an object" : "Nothing exist") 

由于定义了myObject，将返回三进制结果的左侧，但在第二个console.log中，将返回右侧，因为没有定义myAnotherObject并将其计算为undefined。

的解决方案不是计算user对象以返回正确的路由，而是检查用户id或用户名。

const userId = useSelector(state => state.user.currentUser._id)
return (
// rest of the codes ...
{userId ? <Redirect to ="/"/> : <Login/>}
// rest of the codes ...
)

另外，您需要在userSlice中使用{}作为initialState，而不是null

const userSlice = createSlice({
name: "user",
initialState: {
currentUser: {},   // ------> here
isFetching: false,
error: false,
},
// rest of the codes ...

标记

从持久化存储中获取令牌，这是不正确的。不是从持久化存储中检索令牌，而是直接将其保存在localStorage中，然后在需要时获取它。

// set token
localStorage.setItem('ACCESS_TOKEN', token);
// get token
const myToken = localStorage.getItem('ACCESS_TOKEN)