Я не уверен, почему я вижу неопределенный при использовании реагировать редукса

Question

Итак, я пытаюсь интегрировать избыточность в мой код реакции, и у меня возникает проблема, когда массив, к которому я пытаюсь получить доступ, не определен. Это оператор console.log в первом блоке кода. Я просто пытаюсь прочитать данные из магазина редуксов. Я пытался выяснить, почему это проблема, так как мои типы объектов должны быть в порядке, и он должен быть подключен правильно. Я просто не уверен в этом.

InterestList.js

import React, {Component} from 'react'
import {connect} from 'react-redux'

class InterestList extends Component{
    constructor(props){
        super(props)
    }
    render() {
        return(
            <div className = 'container'>
                {console.log(this.props.skillList)}

            </div>
        )
    }
}

const mapStateToProps = (state) =>{
    return{skillList: state.skillList}
}

export default connect(mapStateToProps)(InterestList)

Редуктор для родительского компонента

import {ADD_INTEREST} from "./Constant";
const initialState = {
    skillList: [{skillName: '', skillValue: '', interestValue: ''}]
}
export function interestCard(state = initialState, action){
    switch(action.type){
        case ADD_INTEREST:
            return [...state, action.payload]
        default:
            return state
    }
}

Действие для родительского компонента

import {ADD_INTEREST} from './Constant'

export const addInterest = interest => ({
    type: ADD_INTEREST,
    payload: interest
})

Комбинированные редукторы

import {combineReducers} from 'redux'
import {interestCard} from "./InterestCardReducer";

const rootReducer = combineReducers({
    interestCard,
})

export default rootReducer

Answer 1

Глядя на это:

const rootReducer = combineReducers({
    interestCard,
})

вы должны получить доступ к состоянию следующим образом: state.interestCard.skillList, а не так state.skillList.

Что-то еще не так, что внутри редуктора interestCard ваше начальное состояние предполагает, что состояние является объектом, а не массивом! так что return [...state, action.payload] выдаст ошибку.

И последняя вещь:

   <div className = 'container'>
        {console.log(this.props.skillList)}
    </div>

Это не сработает, потому что console.log не оценивается ни в String, ни в элемент React, ни в список из этих 2.