store.ts

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

const persistConfig = {
    key: "root",
    version: 1,
    storage
}

const rootReducer = combineReducers({
    user: userReducer
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== "production",
    middleware: (getDefaultMiddleware) => 
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
            }
        }) 
})

export const persistor = persistStore(store)

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

main.tsx

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <App />
        </PersistGate> 
      </Provider> 
    </QueryClientProvider> 
  </BrowserRouter>,
)

slices/userSlice.ts

import { TLoginUser } from "../../types"
import { PayloadAction, createSlice } from "@reduxjs/toolkit"

type TInitialState = {
    user: TLoginUser | null 
}

const initialState: TInitialState = {
    user: null 
}

export const userSlice = createSlice({
    name: "user",
    initialState,
    reducers: {
        login: (state, action: PayloadAction<TLoginUser>) => {
            state.user = action.payload
        },
        logout: (state) => {
            state.user = null 
        },
        reset: (state) => {
            state.user = null
        }
    }
})

export const { login, logout, reset } = userSlice.actions

export default userSlice.reducer 

types/index.ts

export type TLoginUser = {
    user: {
        userId: string 
        role: string 
    } 
    orders: string[]
    basketItems: string[]
    refreshToken: string 
    accessToken: string 
}

Redux store management not working normally

当我重新运行应用程序并try 重置REDUX状态时,每当我刷新页面时,初始状态数据都无法清除,并且状态数据来自其他不正确的项目.图片显示了currentUser个我不希望它存在的属性,因为我没有在项目中定义它的属性.请问在try 重置状态数据时如何清除数据?

推荐答案

这听起来像是你只需要吹走之前的"坏状态"值,当页面重新加载时,它会被持久化到你当前的应用store 中.

打开Chrome开发工具,导航到"应用程序"标签,从存储部分下的"本地存储"中 Select 你的应用程序,删除你在那里找到的"persist:root"键,重新加载页面,然后应用程序才有机会重新保持当前的"坏状态".

enter image description here

理想情况下,每个URL只运行一个Reaction应用程序,例如,每个URL都有自己的本地存储,但如果您使用相同的持久化密钥在同一个URL上运行多个项目,那么您可能会遇到这样的问题:每个应用程序只是覆盖相同的"persist:root"个本地存储密钥.如果是这种情况,那么给你的应用程序一个更唯一的密钥.

示例:

const persistConfig = {
  key: "my-unique-app-root",
  version: 1,
  storage
}

Typescript相关问答推荐

如何在类型脚本中声明对象其键名称不同但类型相同?

如何根据数据类型动态注入组件?

在类型内部使用泛型类型时,不能使用其他字符串索引

TypeScript Page Routing在单击时不呈现子页面(React Router v6)

带占位符的模板文字类型何时扩展另一个?

编剧错误:正在等待Expect(Locator).toBeVisible()

有条件地删除区分的联合类型中的属性的可选属性

使用打字Angular 中的通用数据创建状态管理

从泛型类型引用推断的文本类型

Angular 自定义验证控件未获得表单值

是否可以强制静态方法将同一类型的对象返回其自己的类?

为什么发送空字段?

在TS泛型和记录类型映射方面有问题

基于属性值的条件类型

React Context TypeScript错误:属性';firstName';在类型';iCards|iSearch';

类型分布在第一个泛型上,但不分布在第二个泛型上

如何限定索引值必须与相应属性的id字段相同

如何在TypeScript中声明逆变函数成员?

我可以使用对象属性的名称作为对象中的字符串值吗?

使用 fp-ts 时如何使用 TypeScript 序列化任务执行?