为 initialState 反应 redux 设置类型答案

【问题标题】：React redux set type for initialState为 initialState 反应 redux 设置类型
【发布时间】：2021-10-22 14:53:48
【问题描述】：

这是我的 todos redcuer

import ActionType from "../types";
import { Action } from "../actions";

interface Item {
  task: string;
  priority: string;
  id: string;
  isActive: boolean;
  label: string;
}

const initialState = {
  items: [],
};

function reducer(state = initialState, action: Action) {
  switch (action.type) {
    case ActionType.ADD_ITEM:
      return { ...state, items: [action.payload, ...state.items] };

    case ActionType.CROSS_ITEM:
      return {
        ...state,
        items: state.items.map((e: Item) => {
          if (e.id === action.payload) e.isActive = false;
          return e;
        }),
      };

    default:
      return state;
  }
}
export default reducer;

这是我的根减速器

import { combineReducers } from "redux";
import authReducer from "./authReducer";
import todoReducer from "./todoReducer";

const reducers = combineReducers({
  auth: authReducer,
  todo: todoReducer,
});

export default reducers;

最后，这是 store.ts

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/index";

const middleware = [thunk];
const initialState = {};

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

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

export default store;

在我的 TodoList.jsx 中

import {State} from "../store/store"
const items = useSelector((state:State) => state.todo.items);

这给了我一个错误

“从不”类型上不存在属性“项目”

如果我将鼠标悬停在store.getState

在这里，我无法将 todo 视为包含 items 的数组。相反，我只看到 todo:never

如何解决这个错误？

【问题讨论】：

标签： reactjs typescript redux react-redux

【解决方案1】：

您可以这样做：

export type State = ReturnType<typeof rootReducer>;

【讨论】：

【解决方案2】：

您可以为每个状态切片创建类型，以便 TS 可以推断类型。

todoReducer.ts:

import { AnyAction } from 'redux';
import ActionType from './types';

interface Item {
  task: string;
  priority: string;
  id: string;
  isActive: boolean;
  label: string;
}

type TodoState = {
  items: Item[];
};

const initialState: TodoState = {
  items: [],
};

function reducer(state = initialState, action: AnyAction): TodoState {
  switch (action.type) {
    case ActionType.ADD_ITEM:
      return { ...state, items: [action.payload, ...state.items] };

    case ActionType.CROSS_ITEM:
      return {
        ...state,
        items: state.items.map((e: Item) => {
          if (e.id === action.payload) e.isActive = false;
          return e;
        }),
      };

    default:
      return state;
  }
}
export default reducer;

"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"typescript": "^4.3.5"

【讨论】：