解决 ReactDOM.render 在 React 18 中不再受支持，但 make useselector 不会重新渲染

Question

我在应用程序中遇到此错误

警告：React 18不再支持ReactDOM.reder。请改用createRoot。在您切换到新的API之前，您的应用程序将表现为运行React 17。了解更多信息：https://reactjs.org/link/switch-to-createroot

这里是index.ts:的旧版本代码

let persistor = persistStore(store)
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root')
)

我用下面的代码解决了这个警告：

let persistor = persistStore(store)
//@ts-ignore
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>
)

但一旦我解决了上面的问题，一个新的问题就出现了。当redux中的状态发生变化时，useselector钩子没有重新发送组件。下面是我设置redux的代码。

挂钩.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { AppDisPatch, RootState } from "./store";
export const useAppDispatch = () => useDispatch<AppDisPatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

playslice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { PlayMode, Song } from "../types/GlobalTypes";
import { RootState } from "./store";
export type PlayState = {
// 播放状态
playing: boolean;
// 播放模式
playMode: PlayMode;
// 歌曲列表
songList: Song[];
// 播放列表
playList: Song[];
// 当前正在播放的索引
currentIndex: number;
}
const defaultState: PlayState = {
playing: false,
songList: [],
playList: [],
playMode: { type: 'loop', label: '循环' },
currentIndex: -1
}
export const playerSlice = createSlice({
name: 'player',
initialState: defaultState,
reducers: {
setPlaying: (state, action: PayloadAction<{ playing: boolean }>) => {
return { ...state, playing: action.payload.playing }
},
setPlayList: (state, action: PayloadAction<{ playList: Song[] }>) => {
return { ...state, playList: action.payload.playList }
},
setSongList: (state, action: PayloadAction<{ songList: Song[] }>) => {
return { ...state, songList: action.payload.songList }
},
setPlayMode: (state, action: PayloadAction<{ playMode: PlayMode }>) => {
return { ...state, playMode: action.payload.playMode }
},
setCurrentIndex: (state, action: PayloadAction<{ currentIndex: number }>) => {
return { ...state, currentIndex: action.payload.currentIndex }
},
}
})
export const { setPlaying, setPlayList, setSongList, setPlayMode, setCurrentIndex } = playerSlice.actions
export const selectPlaying = (state: RootState) => state.playReducer.playing
export const selectPlayList = (state: RootState) => state.playReducer.playList
export const selectSongList = (state: RootState) => state.playReducer.songList
export const selectPlayMode = (state: RootState) => state.playReducer.playMode
export const selectCurrentIndex = (state: RootState) => state.playReducer.currentIndex

export default playerSlice.reducer

存储.ts

import { combineReducers, configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import persistReducer from 'redux-persist/es/persistReducer'
import storage from 'redux-persist/lib/storage';
import playReducer from './playerSlice'
const reducers = combineReducers({
playReducer
})
const persistConfig = {
key: 'root',
storage
};
const persistedReducer = persistReducer(persistConfig, reducers)
const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware({
serializableCheck: false
})
})
export type RootState = ReturnType<typeof store.getState>
export type AppDisPatch = typeof store.dispatch
export default store

主页组件.ts

const playList = useAppSelector((state) => state.playReducer.playList)
const songList = useAppSelector((state) => state.playReducer.songList)
const currentIndex = useAppSelector((state) => state.playReducer.currentIndex)
const dispatch = useAppDispatch()

问题是，当index.ts的代码是旧版本时，useselector会成功地在redux和rerender home组件中设置状态，但新版本的index.ts不会。我不知道为什么会出现这个问题，也不知道我是否能解决警告并使redux工作。感谢任何能帮助我的人。

Answer 1

我遇到了同样的问题。升级到react redux 8.0.2为我修复了它。

react redux最新主要发行版的发行说明(https://github.com/reduxjs/react-redux/releases/tag/v8.0.0)开始时使用：

此主要版本更新了useSelector、connect，并与React 18 兼容