我对 Redujx-toolkit 有疑问

Question

当我使用来自 react-redux 的 useSelector Hook 时，有时我会收到一条错误消息：“useSyncExternalStore 不是一个函数”。我试图搜索 google 来解决问题，但我没有找到任何东西。

这是我在 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;

我的自定义 Hooks

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { RootState, AppDispatch } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

创建切片文件

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 v.18 的新 Hook，它仍处于测试阶段 :)。有时，stackblitz 建议我添加最新版本的 React 并出现错误。我用的是老版本，效果很好

Answer 2

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

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

这将有助于解决旧的冲突版本

我对 Redujx-toolkit 有疑问

I have a problems with Redujx-toolkit

reactjs

redux

react-redux

redux-toolkit