时间戳

首页 > 解决方案 > 无法使用 typescript 从 redux 工具包访问数据

reactjs - 无法使用 typescript 从 redux 工具包访问数据

问题描述

我目前正在通过使用 React、Redux-toolkit 和 Typescript 创建一个非常简单的 todo 应用程序来学习 typescript。当我尝试使用 useSelector 从存储中访问数据时，我得到一个包含我想要的值的对象（在本例中为 Todo 数组）。

//TodoList.tsx
const todos = useSelector(selectTodos)

待办事项的 Console.log ：

Object { todos: (1) […] }

//TodoSlice.tsx
export const selectTodos = (state: RootState): Todo[] => state.todos

问题是我无法访问数组，因为根据 TS 编译器，这个值不存在（但根据控制台它在那里！）

如果您想了解更多信息，请在此处查看完整代码

干杯，并提前感谢！（也很抱歉可能的错别字）

标签： reactjstypescriptreduxredux-toolkit

解决方案

实际上，您定义RootState的不是根状态，而只是您的切片状态类型。

你可以RootState通过

export const store = configureStore({
    reducer: {
        todos: todosReducer
    }
})

export type RootState = ReturnType<typeof store.getState>;

然后您实际上会注意到您的待办事项是 in state.todos.todos，而不是 in state.todos。

推荐阅读