React-Redux: визуализировать массив элементов

Question

Я учусь использовать реакцию и редукцию.

Итак, у меня есть несколько вопросов:

Я структурировал таким образом:

редукторы. js

const initialState = {
    meetings: []
}

export const reducer = (state = initialState, action) => {
    switch(action.type){
        case 'MEETINGS_LIST':
            return [...state.meetings, action.meetings];
        default: 
            return state;
    }    
}
export default reducer;

действие. js

export const meetingsList = (meeting) => {
    return(dispatch) => {
        fetch(`https://jsonplaceholder.typicode.com/users`)
        .then(
            res => res.json(),
            error => console.log('An error occurred.', error))
        .then(meetings => {
            dispatch({
                type: 'MEETINGS_LIST',
                meetings: meetings
            })
        })
    }
}

Правильно делать выборку в действиях. js ? Или я должен делать в редукторах?

В любом случае моя проблема на главной странице,

class MeetingsList extends Component {
    constructor(props){
        super(props);
        this.state = {}
    }
componentDidMount(){
    this.props.meetingsList();
}


render(){
    console.log(this.props.meetings)
    return(
        <div>

        </div>
    )
}
}

function mapStateToProps(state){
    return {meetings: state}
};

function mapDdispatchToProps(dispatch){
    return {
        meetingsList: (meetings) => dispatch(meetingsList(meetings))
    }
}

export default connect(mapStateToProps, mapDdispatchToProps)(MeetingsList)

Я бы хотел напечатать содержимое реквизита на экране. Это массив [10], я думал об использовании карты, чтобы иметь возможность печатать каждый массив, но каждый раз, когда я пытаюсь это сделать, он говорит мне, что невозможно использовать карту неопределенного типа. Как я могу это сделать?

Спасибо

Answer 1

Несколько вещей:

1. Вы определяете initialState как объект. Для типа MEETINGS_LIST вы возвращаете массив.
2. После второй отправки MEETINGS_LIST вы распространяете state.meetings, который не определен (потому что состояние больше не является объектом)
3. Вы отправляете { meetings: meetings }, где meetings - массив (потому что вы получаете список пользователей в данный момент). Но вы не распространяете этот массив в вашем MEETINGS_LIST обработчике.

Итак:

1. Измените (state = initialState) на (state = []).
2. Измените свой обработчик 'MEETINGS_LIST' на return [...state, ...action.meetings];
3. Теперь вы можете l oop на своих собраниях:

const elements = this.props.meetings.map((meeting) => <li key={meeting.id}>{meeting.title}</li>);

return <ul>{elements}</ul>