не может передать состояние как реквизит от редукса

Question

Я нахожусь в течение нескольких часов, пытаясь создать приложение-задачу, используя Reaction + redux. Я пытался сотнями способов, и, похоже, я не могу его получить. В основном, я пытаюсь получить свое состояние в качестве реквизита в своем компоненте, и я не могу каждый раз, когда я пытаюсь отобразить что-то, я получаю "undefined"

`

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

export const TodoList = () => {
    return (
        <div>
            <h1>There's going to be a list of todos.</h1>
            <h2>{this.props.todos}</h2>
        </div>
    )
}

const mapStateToProps = (state) => ({
    todos: state.todos
})

export default connect(mapStateToProps)(TodoList)
` 

код выглядит следующим образом, а также редуктор.

    const todosReducer = ( state = [{
    id: 1,
    content: 'asdads',
    isDone: false
}], action) => {
    switch(action.type){
        case 'ADD_TODO' :
            return [
                ...state,
                {
                    id: action.id,
                    content: action.content,
                    isDone: action.isDone
                }
            ]
        case 'DELETE_TODO':
            return state.filter(todo => {
                return todo.id !== action.id
            })
        default:
            return state;
    }
}
export default todosReducer

, а затем здесь функция combReducer, потому что я хочу добавьте несколько фильтров позже. И на самом деле я отмечаю это как задачи, но это не сработает

    import { combineReducers } from 'redux';
import todosReducer from './todos';
const rootReducer = combineReducers({
    todos: todosReducer
})

export default rootReducer

Может кто-нибудь из вас, хорошие мальчики, объяснить мне правильный путь?

Answer 1

вам нужно передать реквизиты в качестве аргумента функциональному компоненту, в противном случае компонент не будет знать, где объявлен идентификатор, поэтому он не определен.

Также вам нужно использовать props.todos вместо этого. props.todos, так как вы используете функциональный компонент вместо компонента класса.

export const TodoList = (props) => {
return (
    <div>
        <h1>There's going to be a list of todos.</h1>
        <h2>{props.todos}</h2>
    </div>
    )
}

Надеюсь, это поможет.

Редактировать: как указано @Shubham Khatri, вам также нужно отобразить поверх массив и рендеринг списка

Например:

{props.todos.map((todo) => {
    return <h2>{todo.content}</h2>
})}

Вы также можете использовать синтаксис сокращения для автоматического возврата значения.