У меня есть проект на React (квиз), мне нужно было переписать его с использованием Redux. Тут у меня и возникла проблема, после которой проект перестал работать. Я скачал нужные пакеты, а дальше все было так:
- Переделал файл, ответственный за отображение страницы с тестами (QuizList.js):
import React from "react";
import classes from './QuizList.css';
import {NavLink} from 'react-router-dom';
import Loader from "../../components/UI/Loader/Loader";
import { connect } from 'react-redux';
import { fetchQuizes } from '../../store/actions/quiz';
class QuizList extends React.Component {
renderQuizes() {
return this.props.quizes.map(quiz => {
return (
<li key={quiz.id}>
<NavLink to={'/quiz/' + quiz.id}>{quiz.name}</NavLink>
</li>
)
})
}
componentDidMount() {
this.props.fetchQuizes();
}
render () {
return (
<div className={classes.QuizList}>
<div>
<h1>List of tests</h1>
{ this.props.loading && this.props.quizes.length !== 0
? <Loader />
: <ul>
{ this.renderQuizes() }
</ul> }
</div>
</div>
)
}
}
function mapStateToProps(state) {
return {
quiz: state.quiz.quizes,
loading: state.quiz.loading
}
}
function mapDispatchToProps(dispatch) {
return {
fetchQuizes: () => dispatch(fetchQuizes())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(QuizList);
- State из QuizList я перенес в reducer (quiz.js в папке reducers):
import { FETCH_QUIZES_START,
FETCH_QUIZES_SUCCESS,
FETCH_QUIZES_ERROR } from "../actions/actionTypes";
const initialState = {
quizes: [],
loading: false,
error: null
}
export default function quizReducer(state = initialState, action) {
switch(action.type) {
case FETCH_QUIZES_START:
return {
...state, loading: true
};
case FETCH_QUIZES_SUCCESS:
return {
...state, loading: false, quizes: action.quizes
};
case FETCH_QUIZES_ERROR:
return {
...state, loading: false, error: action.error
}
default:
return state;
}
}
- Подключил данный reducer к rootReducer.js:
import { combineReducers } from "redux";
import quizReducer from "./quiz";
export default combineReducers({
quiz: quizReducer
})
Проблема, собственно, в том, что по моим подсчетам, State должен храниться в props, но у меня появилась ошибка TypeError: undefined is not an object (evaluating 'this.props.quizes.map') в файле QuizList.js. Ранее, когда я реализовывал эту логику без Redux, я обращался к state, и это прекрасно работало. Вот ссылка на репозиторий, буду благодарен, если подскажете, что я мог упустить