Reactjs 使用typescript和redux检索存储数据的错误在哪里？

这是我的减速机-----

这是根部减速器-----

从“redux”导入{combinereducer}；
从“/workoutlist”导入workoutListReducer；
export const rootReducer=combinereducer({
工作列表：工作列表减速器，
});
导出类型RootState=ReturnType；

这就是我试图检索组件中存储信息的地方------

从“react redux”导入{connect，ConnectedProps，useSelector}；
从“./types”导入{WorkoutList as workouts，Workout}；
//接口道具{}
接口状态道具{
训练列表：训练；
}
const WorkoutList:React.FC=（道具：道具）=>{
返回(
你的训练
{console.log（props）}//这就是我在控制台上记录它的地方。
);
};
常量mapStateToProps=（状态：StateProps）=>({
workoutlist:state.workoutlist，
});
常量连接器=连接（mapStateToProps）；
类型PropsFromRedux=已连接的PROPS；
类型Props=PropsFromRedux&{
背景颜色：字符串；
};
导出默认连接器（WorkoutList）；

我尝试过使用useSelector，正如您所看到的，我尝试过使用connect。虽然在redux中使用typescript，但总体上我还是有点迷茫。目前我只想在initialState中访问console中的训练。将它们记录在我的组件中。现在，当我使用console.log（props）时，它会将workoutlist显示为未定义

我相当自信我正确地完成了动作和动作类型

如果有人有任何建议或需要更多信息，请让我知道

---

谢谢大家!

在您的

MapStateTrops

和

界面中

工作列表

应该是

工作列表

（大写L）

。。。
接口状态道具{
训练列表：训练；
}
...
常量mapStateToProps=（状态：StateProps）=>({
workoutlist:state.workoutlist，//您的组件中没有任何命名为道具的东西。相反，您应该从StateProps派生道具。
import {
  WorkoutList,
  STARTED_WORKOUT,
  END_WORKOUT,
  WorkoutActionTypes,
} from "../types";

export const initialState: WorkoutList = {
  workouts: [
    {
      id: Math.random().toString(),
      name: "Leg Day",
      date: new Date(),
      duration: 60,
      started: false,
      completed: false,
      exerises: [
        {
          id: Math.random().toString(),
          name: "Squats",
          completed: false,
          sets: [
            {
              id: Math.random().toString(),
              reps: 12,
              weight: 60,
              completed: false,
            },
            {
              id: Math.random().toString(),
              reps: 12,
              weight: 60,
              completed: false,
            },
            {
              id: Math.random().toString(),
              reps: 12,
              weight: 60,
              completed: false,
            },
          ],
        },
      ],
    },
  ],
};

const workoutListReducer = (
  state = initialState,
  action: WorkoutActionTypes
): WorkoutList => {
  switch (action.type) {
    case STARTED_WORKOUT:
      return {
        ...state,
        workouts: state.workouts.map((workout) =>
          workout.id === action.payload.id
            ? { ...workout, started: true }
            : workout
        ),
      };

    case END_WORKOUT:
      return {
        ...state,
        workouts: state.workouts.map((workout) =>
          workout.id === action.payload.id
            ? { ...workout, completed: true }
            : workout
        ),
      };

    default:
      return state;
  }
};

export default workoutListReducer;

import { combineReducers } from "redux";
import workoutListReducer from "./workoutlist";

export const rootReducer = combineReducers({
  workoutList: workoutListReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

import { connect, ConnectedProps, useSelector } from "react-redux";

import { WorkoutList as workouts, Workout } from "../types";

// interface Props {}

interface StateProps {
  workoutlist: workouts;
}

const WorkoutList: React.FC<Props> = (props: Props) => {
  return (
    <>
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start">
              <IonMenuButton />
            </IonButtons>
            <IonTitle>Your Workout</IonTitle>
            <IonButtons slot="end">
              <IonButton>
                <IonIcon icon={personCircleOutline} slot="icon-only" />
              </IonButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonGrid>
            {console.log(props)} // This is where I am console logging it.
          </IonGrid>
        </IonContent>
      </IonPage>
    </>
  );
};

const mapStateToProps = (state: StateProps) => ({
  workoutlist: state.workoutlist,
});

const connector = connect(mapStateToProps);

type PropsFromRedux = ConnectedProps<typeof connector>;

type Props = PropsFromRedux & {
  backgroundColor: string;
};

export default connector(WorkoutList);