Реагируйте - Redux: asyn c вызов с Thunk

Question

Я учусь использовать response-redux, в частности, я хотел бы получить информацию, сделав вызов API.

В настоящий момент я структурировал свой проект следующим образом:

/src
  /Components
   MeetingInformation.js
  /Redux
   actions.js
   reducers.js
   store.js
 App.js

в моем действии. js

export const meetingInformation = (meeting) => {
    return(dispatch) => {
        fetch('apiLinkToTheMeeting')
        .then(res => res.json())
        .then(meeting => {
            dispatch({
                type: 'MEETING_INFORMATION',
                meeting: meeting
            })
        })
    }
}

редукторы. js

const initialState = {
    meeting: []
}

export const meetingReducer = (state = initialState, action) => {
    switch(action.type){
        case 'MEETING_INFORMATION':
            return [...state, ...action.meeting]
    }
    return state;
}

export default meetingReducer;

магазин. js

import { createStore, compose, applyMiddleware } from "redux";
import { meetingReducer } from './reducers';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
    meetingReducer, 
    composeEnhancers(
        applyMiddleware(
            thunk
        )
    )
);

MeetingInformation. js

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

class MeetingInformation extends Component {
    constructor(props){
        super(props);
        this.state = {
            meetingMotivation: '',
            start: ''
        }
    }
componentDidMount(){
    this.props.meetingInformation()
}
handleSubmit = (e) => {
    e.preventDefault();
    this.props.meetingInformation(this.state)
}

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

        </div>
    )
}}
const mapDdispatchToProps = (dispatch) => {
    return {
        meetingInformation: (meeting) => dispatch(meetingInformation(meeting))
    }
}
export default connect(null, mapDdispatchToProps)(MeetingInformation)

Теперь я не знаю, правильно ли то, что я сделал, но console.log MeetingInformation пуст, а также у меня есть ошибка в действии:

Информация о собрании кажется пустой

{meetingInformation: ƒ}
meetingInformation: meeting => {…}
arguments: (...)
caller: (...)
length: 1
name: "meetingInformation"
__proto__: ƒ ()
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (async)        
(anonymous) @   actions.js:6

РЕДАКТИРОВАТЬ:

Журнал ответ:

Response {type: "basic", url: "myapiurl", redirected: false, status: 200, ok: true, …}
type: "basic"
url: "myapiurl"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers
__proto__: Headers
body: (...)
bodyUsed: false
__proto__: Response

Что мне нужно сделать, это восстановить информацию с помощью thunk из моей базы данных. Как я могу сделать?

Большое спасибо.

Answer 1

Несколько замечаний.

• Вы регистрируетесь this.props. На этом этапе ваш реквизит имеет метод meetingInformation. Вам нужно будет сопоставить состояние притока с вашими реквизитами.

const mapStateToProps = state => {
    return {
        meeting: state,
    }
};

• В вашем редукторе вы распространяете состояние, т.е. return [...state, action.meeting]. Даже если ваша текущая проблема решена, у вас все равно будет проблема с вашим редуктором. Так что распространяйте state.meeting т.е. [...state.meeting, action.meeting]
• Ошибка, которую вы получаете, зависит от структуры данных, которую возвращает ваш API. Вы напечатали ответ, но материал в body скрыт. Поэтому распечатайте и проанализируйте текст ответа.

Я взял ваш код и протестировал его локально с примером API, и он работает.

См. Рабочую демонстрацию здесь. Проанализируйте мой код и внесите необходимые изменения в свой код и посмотрите, как он работает. Любые дальнейшие проблемы предоставляют надлежащие журналы ответов API, которые будут полезны для отладки.

https://codesandbox.io/s/nifty-black-fh8rd?file= / src / components / MeetingInformation. js