我在安装Reduxx工具包时遇到依赖性问题

Question

当我使用来自react redux的useSelector Hook时，有时我会收到一个错误："useSyncExternalStore不是函数"；。我试着在谷歌上搜索以解决问题，但什么也没找到。

以下是我在stackblitz上的完整代码：https://stackblitz.com/edit/react-ts-k7tfxu?file=components%2FTodoList.tsx

TodoList.tsx

import React from 'react';
import TodoItem from './TodoItem';
import { useAppSelector } from '../app/hooks';
const TodoList = () => {
//if I remove this line, it's work fine!
const list = useAppSelector((state) => state.todos.list);
return (
<ul>
<TodoItem {...list} />
</ul>
);
};
export default TodoList; 

store.tsx

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './features/todos-slice';
export const store = configureStore({
reducer: {
todos: todosReducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

我的定制挂钩

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

createSlice文件

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { TodoState } from '../../interface';
interface Todos {
list: TodoState[];
}
const initialState: Todos = {
list: [
{
id: 1,
text: 'Learn Javascript',
done: false,
},
{
id: 2,
text: 'Learn React',
done: false,
},
{
id: 3,
text: 'Build a React App',
done: false,
},
],
};
export const todosSlice = createSlice({
name: 'todos',
initialState,
reducers: {},
});
export default todosSlice.reducer;

Answer 1

您需要确保所有版本都处于同步状态。在正在进行的项目中升级react版本时，您需要密切关注它所具有的所有依赖项。您可以尝试一些npm命令。

npm install--force，or--legacy peer deps

这将有助于旧的冲突版本

Answer 2

我发现了一个问题！这是React v.18中的新Hook，目前仍处于测试阶段：(。有时，stackblitz建议我添加最新版本的react，但却出现了错误。我使用的是旧版本，它运行得很漂亮