存储组件在redux中重复

1tuwyuhd  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(182)

我已经定义了三个单独的redux切片,即user、profile和general,定义如下:
第一个
存储器被定义为:

import { configureStore } from '@reduxjs/toolkit'
import userReducer from './userSlice'
import profileReducer from './profileSlice'
import generalReducer from './generalSlice';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';

const persistConfig = {
  key: 'root',
  storage,
}

const persistedUserReducer = persistReducer(persistConfig, userReducer)
const persistedProfileReducer = persistReducer(persistConfig, profileReducer)
const persistedGeneralReducer = persistReducer(persistConfig, generalReducer)

export const store = configureStore({
  reducer: {
    user: persistedUserReducer,
    profile: persistedProfileReducer,
    general: persistedGeneralReducer,
  },
  middleware: [thunk],
})

export const persistor = persistStore(store)

我使用下面的例子来更新商店的值:

dispatch(login({ username: username, token: response.data.key }))
dispatch(setIsLogedIn({ isLogedIn: true }))
dispatch(setIsPreparing({ isPreparing: true }))

运行调度语句后,每个组件都构成了所有变量的副本:

我做错了吗?我的错误是什么?你能帮我找到问题吗?

ulmd4ohb

ulmd4ohb1#

combineReducers Package 您的所有异径管:

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import userReducer from './userSlice'
import profileReducer from './profileSlice'
import generalReducer from './generalSlice';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';

const persistConfig = {
  key: 'root',
  storage,
}

const rootReducer = combineReducers({
 user: userReducer,
 profile: profileReducer,
 general: generalReducer 
})

const persistedReducer = persistReducer({...persistConfig}, rootReducer)

export const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk],
})

export const persistor = persistStore(store)

相关问题