React-Redux: получить подробную информацию при нажатии кнопки

Question

Я учусь использовать реакцию и редукцию, и я немного сбиваю с толку ..

Что я хотел бы сделать:

• Восстановление данных из API и создать список с помощью кнопки (готово)
• Нажмите на кнопку и восстановите информацию (это проблема, я хотел бы сделать это на другой странице, но на данный момент все в порядке и на той же странице)

редукторы. js

const initialState = {
    meetings: [],
    idmeeting: []
}

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

}

export default reducer;

действия. js

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

export const meetingSingle = (idmeeting) => {
 // at the moment I use the information from the user 1
    fetch(`https://jsonplaceholder.typicode.com/users/1`, {
        headers : { 
            'Accept': 'application/json'
           }
    })
    .then(
        res => res.json(),
        error => console.log('An error occurred.', error))
    .then(idmeeting => {
        dispatch({
            type: 'MEETING_CURRENT',
            idmeeting: idmeeting
        })
    })
}

MeetingList. js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { meetingsList, meetingSingle } from '../Redux/actions';

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

handleClick(id){
    alert("ALERT " + id);
}


render(){
    console.log(this.props.meetings)
    const listMeetings = this.props.meetings.map((meeting) => 
    <li key={meeting.id}>{meeting.name}
    <button key={meeting.id} onClick={meetingSingle(meeting.id)} value={meeting.id}>{'Details'}</button>
    </li>);
    return(
        <div>
                   <ul>{listMeetings}</ul>
        </div>
    )
}
}

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

function mapDispatchToProps(dispatch){
    return {
        meetingsList: (meetings) => dispatch(meetingsList(meetings)),
        meetingSingle: (idmeeting) => dispatch(meetingSingle(idmeeting))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MeetingsList)

Поэтому моя проблема заключается в том, чтобы нажать на кнопку и сделать вызов API для получения подробной информации. Может кто-нибудь помочь мне понять, в чем проблема (в настоящий момент я получаю сообщение об ошибке, что отправка не определена в действиях, но я не думаю, что это единственная проблема)

Спасибо

Answer 1

Ваше действие будет отправлено, когда компонент будет отображаться с неверными данными. Вам нужно предоставить функцию onClick вместо выполнения внутри onClick

Это

onClick={meetingSingle(meeting.id)}

Должно быть

onClick={() => meetingSingle(meeting.id)}

Вам необходимо импортировать хранилище в действиях. js файл и затем используйте store.dispatch() где необходимо

import { store } from './your path for store';

export const meetingSingle = (idmeeting) => {
 // at the moment I use the information from the user 1
    fetch(`https://jsonplaceholder.typicode.com/users/1`, {
        headers : { 
            'Accept': 'application/json'
           }
    })
    .then(
        res => res.json(),
        error => console.log('An error occurred.', error))
    .then(idmeeting => {
        store.dispatch({
            type: 'MEETING_CURRENT',
            idmeeting: idmeeting
        })
    })
}