配置Redux Store遇类型错误，附代码求解决方案

我正在学习React-Redux的TypeScript快速入门教程，但遇到了两个问题：

1. 使用configureStore时出现错误：Property 'reducer' does not exist on type 'Reducer<Winner>'
2. selectWinner函数也报错

以下是我的代码：

store.ts

import { configureStore } from "@reduxjs/toolkit";
import winnerSlice from "./winnerSlice";

const store = configureStore({
  reducer: {
    winners: winnerSlice.reducer,
  }
})

export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

export type AppStore = typeof store

winnerSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState } from './store';

interface Winner {
  name: string
}

const initialState: Winner = {
  name: "",
}

export const winnerSlice = createSlice({
  name: 'winner',
  initialState,
  reducers: {
    setWinner: (state, action: PayloadAction<string>) => {
      state.name = action.payload
    },
    clearWinner: (state) => {
      state.name = ""
    }
  }
})

export const { setWinner, clearWinner } = winnerSlice.actions

export const selectWinner = (state: RootState) => state.winners.value // 该行存在错误

export default winnerSlice.reducer

我觉得文档中的示例（如下）不够完整，无法继续推进，希望得到配置Store的提示：

posts: postsReducer,
comments: commentsReducer,
users: usersReducer,

问题原因及修复方案 #

1. configureStore 报错问题

在store.ts中，你导入的winnerSlice已经是默认导出的reducer函数，不是slice对象，因此不需要再访问.reducer属性。

2. selectWinner 报错问题

在RootState中，state.winners对应的就是你定义的Winner接口类型，它只有name属性，没有value属性，直接取state.winners.name即可。

修正后的 store.ts

import { configureStore } from "@reduxjs/toolkit";
import winnerReducer from "./winnerSlice";

const store = configureStore({
  reducer: {
    winners: winnerReducer,
  }
})

export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

export type AppStore = typeof store

修正后的 winnerSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState } from './store';

interface Winner {
  name: string
}

const initialState: Winner = {
  name: "",
}

export const winnerSlice = createSlice({
  name: 'winner',
  initialState,
  reducers: {
    setWinner: (state, action: PayloadAction<string>) => {
      state.name = action.payload
    },
    clearWinner: (state) => {
      state.name = ""
    }
  }
})

export const { setWinner, clearWinner } = winnerSlice.actions

export const selectWinner = (state: RootState) => state.winners.name

export default winnerSlice.reducer

额外说明 #

Redux Toolkit中，createSlice返回的slice对象包含.reducer属性，我们通常会把这个.reducer默认导出，所以导入时拿到的就是最终的reducer函数，不需要额外访问.reducer。文档示例里的posts: postsReducer就是直接使用导入的reducer，和修正后的写法一致。

内容的提问来源于stack exchange，提问作者Jenia Be Nice Please