我目前正在做一个抽认卡项目,来自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>
);
}
但我得到这个错误:
这是因为选择器传递了错误的状态,我不知道为什么?
1条答案
按热度按时间ndh0cuux1#
原来我没有包括quizzesReducer在我的合并收割机减速器商店功能,之前它是:
但它应该是: