2

У меня есть проект на React (квиз), мне нужно было переписать его с использованием Redux. Тут у меня и возникла проблема, после которой проект перестал работать. Я скачал нужные пакеты, а дальше все было так:

  1. Переделал файл, ответственный за отображение страницы с тестами (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);
  1. 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;
    }
}
  1. Подключил данный 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, и это прекрасно работало. Вот ссылка на репозиторий, буду благодарен, если подскажете, что я мог упустить

1 ответ 1

1

У вас в функции mapStateToProps() свойство называется quiz, а обращаетесь вы к props к несуществующему свойству quizes. Необходимо переименовать в функции свойство quiz на quizes.

Правильный код в QuizList.js:

function mapStateToProps(state) {
    return {
        quizes: state.quiz.quizes,
        loading: state.quiz.loading
    }
}
1
  • Спасибо, вы мне сильно помогли
    – Listopad02
    6 дек 2021 в 11:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.