reactjs Redux选择器使用不正确的状态切片

bq8i3lrv  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(142)

我目前正在做一个抽认卡项目,来自codecademy.com,其中涉及到使用React和Redux制作抽认卡应用程序,您可以在其中创建一个主题,然后为每个主题制作测验,我有一个选择器(export const selectQuizzes = (state) => state.quizzes.quizzes;),它应该返回以下状态切片:

quizzes: {
    quizzes: {
        '456': {
            id: '456',
            topicId: '123',
            name: 'quiz for example topic',
            cardIds: ['789', '101', '102']
        }
    }
},

而是返回以下状态片段:

topics: {
    topics: {
        '123': {
            id: '123',
            name: 'example topic',
            icon: 'icon url',
            quizIds: ['456']
        }
    }
},

这是我的整个quizzesSlice.js文件

import { createSlice } from "@reduxjs/toolkit";
import { addQuizId } from "../topics/topicsSlice";

//* Define the options that createSlice will use
const sliceOptions = {
  name: "quizzes",
  initialState: {
    quizzes: {}
  },
  reducers: {
    addQuiz: (state, action) => {
      const { id, name, topicId, cardIds } = action.payload;
      state.quizzes[id] = {
        id: id,
        topicId: topicId,
        name: name,
        cardIds: cardIds
      };
    }
  }
};

export const addQuizThunk = (quiz) => {
  const { id, topicId } = quiz;
  return (dispatch) => {
    dispatch(quizzesSlice.actions.addQuiz(quiz));
    dispatch(addQuizId({ quizId: id, topicId: topicId }));
  };
};

//* Create a new slice of state with the sliceOptions configuration object
export const quizzesSlice = createSlice(sliceOptions);

//* Selectors
export const selectQuizzes = (state) => state.quizzes.quizzes;

//* Export actions generated by createSlice()
export const { addQuiz } = quizzesSlice.actions;

//* Export reducer generated by createSlice()
export default quizzesSlice.reducer;

我试着在这个文件(Quizzes.js)中使用我的选择器:

import { Link } from "react-router-dom";
import ROUTES from "../../app/routes";
import { useSelector } from "react-redux";
import { selectQuizzes } from "./quizzesSlice";

export default function Quizzes() {
  const quizzes = useSelector(selectQuizzes); // replace this with a call to your selector to get all the quizzes in state

  return (
    <section className="center">
      <h1>Quizzes</h1>
      <ul className="quizzes-list">
        {Object.values(quizzes).map((quiz) => (
          <Link key={quiz.id} to={ROUTES.quizRoute(quiz.id)}>
            <li className="quiz">{quiz.name}</li>
          </Link>
        ))}
      </ul>
      <Link to={ROUTES.newQuizRoute()} className="button">
        Create New Quiz
      </Link>
    </section>
  );
}

但我得到这个错误:

这是因为选择器传递了错误的状态,我不知道为什么?

ndh0cuux

ndh0cuux1#

原来我没有包括quizzesReducer在我的合并收割机减速器商店功能,之前它是:

import { configureStore } from "@reduxjs/toolkit";
import topicsReducer from "../features/topics/topicsSlice";

export default configureStore({
  reducer: {
    topics: topicsReducer,
  },
});

但它应该是:

import { configureStore } from "@reduxjs/toolkit";
import topicsReducer from "../features/topics/topicsSlice";
import quizzesReducer from "../features/quizzes/quizzesSlice";

export default configureStore({
  reducer: {
    topics: topicsReducer,
    quizzes: quizzesReducer,
  },
});

相关问题