React Redux useSelector结合TypeScript使用报错求助

问题描述 #

尝试通过Redux在TypeScript环境下将搜索词传递到另一页面时，SearchResults.tsx中的useSelector出现两个问题：

• state被识别为unknown类型
• state.searchResult无法被TypeScript识别

相关代码 #

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>Result {searchResults}</h1>
        </div>
    )
}

export default SearchResults;

解决方案 #

1. 正确定义RootState类型 #

不能直接使用react-redux提供的RootState，需要根据根reducer导出专属的RootState类型，让TypeScript识别state结构。

假设你的allReducers是通过combineReducers组合的，修改reducers组合文件（比如reducers/index.ts）：

import { combineReducers } from 'redux';
import searchReducer from './searchReducer';

// 组合reducers，确保键名与useSelector中使用的`searchResult`一致
const allReducers = combineReducers({
  searchResult: searchReducer
});

// 自动推导并导出RootState类型
export type RootState = ReturnType<typeof allReducers>;

export default allReducers;

2. 修改SearchResults.tsx的RootState导入 #

替换从react-redux导入的RootState为自己定义的类型：

import { Flex } from "@chakra-ui/react";
import React from "react";
import Search from "../components/Search";
import { useSelector } from "react-redux";
// 导入自定义的RootState（根据实际文件路径调整）
import { RootState } from '../reducers';

const SearchResults = () => {
    // 此时state会自动拥有正确类型，state.searchResult可被正常识别
    const searchResults = useSelector((state: RootState) => state.searchResult)
    
    return(
        <div>
            <h1>Result {searchResults}</h1>
        </div>
    )
}

export default SearchResults;

3. 优化Reducer类型安全（可选但推荐） #

避免action的type和payload使用any，定义明确的action类型：

// 定义action的类型约束
type SearchAction = {
  type: 'searchTerm';
  payload: string;
};

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

export default searchReducer

4. 确认Store创建正确性 #

确保index.tsx中导入的allReducers是包含searchResult键的根reducer，这样store的state才会存在对应属性。

内容的提问来源于stack exchange，提问作者mmender22