将React Redux useSelector与TypeScript一起使用

Question

发布，因为没有更新版本。。。因此，我试图有一个按钮，使用ts中的redux将搜索词传递到另一个页面。

这是我的index.tsx文件

const store = createStore(allReducers)
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<DAppProvider config={{}}>
<ChakraProvider theme={theme}>
<Provider store={store}>
<App />
</Provider>
</ChakraProvider>
</DAppProvider>
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);

这是我的searchReducer.tsx文件

const searchReducer = (state = '', action: { type: any; payload: any; }) => {
switch(action.type){
case "searchTerm":
return action.payload;
default:
return state;
}
}
export default searchReducer

这是我的SearchResults.tsx文件

import { Flex } from "@chakra-ui/react";
import React from "react";
import Search from "../components/Search";
import { useSelector } from "react-redux";
import { RootState } from 'react-redux';
const SearchResults = () => {
const searchResults = useSelector((state: RootState) => state.searchResult)

return(
<div>
<h1>Restule {searchResults}</h1>
</div>
)
}
export default SearchResults;

我的SearchResults.tsx文件中有useSelector和state.searchResult的问题。它无法识别状态(未知(，我已经尝试了多个旧的答案，但似乎都不起作用。

redux是新手，因此非常感谢您的帮助。

感谢

Answer 1

您应该为RootState添加自己的打字法，有两种方法：

type RootState = ReturnType<typeof store.getState> // 1 approach
type RootState = ReturnType<typeof rootReducer> // 2 approach in case you have combined all reducers to root one 

检查文档：https://redux-toolkit.js.org/usage/usage-with-typescript#getting-状态类型