Réagir/Redux obtenir une réponse de l'API

Question

Je n'arrive pas à comprendre comment obtenir dans mon front React le même résultat que celui obtenu avec mon API dans Postman.

pour le contexte que j'envoie un appel au format JSON de cette nature:

{ 
    "bagel": false, 
    "pretzel": false, 
    "curry": true, 
    "wurst": "true", 
} 

et je reçois le même genre de chose:

{ 
    "bagelavailability": false, 
    "pretzelavailability": false, 
    "curryavailability": true, 
    "wurstavailability": "true", 
} 

mais peu importe ce que je fais je ne peux pas console.log la réponse API reçue.

Voici mon actions.jsx actuel:

function FirstCall(specs) { 
    return (dispatch) => { 
     const payload = CallOne.post(specs); 
     payload.then((response) => { 
      console.log(response); // undefined !! 
      if (!response.ok) { // this if is entered but I guess null.ok is false by definition. 
       dispatch(Notifications.error({ title: 'Message', message: 'error!' })); 
      } 
     }); 
    }; 
} 

ceci est mon appel un code:

/* ************************************* */ 
/* ********  IMPORTS  ******** */ 
/* ************************************* */ 
import Api from './Api'; 

const Resource = Api.all('order'); 
Resource.init = (data) => { 
    if (data) { 
     const dataObj = JSON.parse(data); 
     return { 
      all: Resource.all, 
      data() { return dataObj; }, 
      save(...args) { 
       if (this.data()[Resource.identifier()]) { 
        return Resource.put(this.data()[Resource.identifier()], this.data(), ...args); 
       } 
       return Resource.post(this.data(), ...args); 
      }, 
      one: Resource.one, 
      url: Resource.url, 
     }; 
    } 
    return undefined; 
}; 
/* ************************************* */ 
/* ********  EXPORTS  ******** */ 
/* ************************************* */ 
export default Resource; 

et voici "API":

/* ************************************* */ 
/* ********  IMPORTS  ******** */ 
/* ************************************* */ 
import 'whatwg-fetch'; 
import restful, { fetchBackend } from 'restful.js'; 

/* ************************************* */ 
/* ********  EXPORTS  ******** */ 
/* ************************************* */ 
export default restful('http://localhost:8080', fetchBackend(fetch)); 

Answer 1

Ok donc ci-dessous sont les configuration des fichiers je dois pirater le problème:

Le piratage que j'ai trouvé est de faire un réducteur pour le premier appel même pensé que ce ne devrait pas être nécessaire et grâce à son succès, prenez la réponse vérifier: (meilleures solutions sont les bienvenues)

/Redux/EventTypes. JSX:

export default { 
    FIRST_CALL: { type: 'FIRST_CALL' }, 
    FIRST_CALL_FULFILLED: { type: 'FIRST_CALL_FULFILLED' }, 
    SECOND_CALL: { type: 'SECOND_CALL' }, 
    SECOND_CALL_FULFILLED: { type: 'SECOND_CALL_FULFILLED' }, 
}; 

/Redux/Reducers/FirstCall.jsx:

import EventTypes from '../EventTypes'; 

const initialState = { 
    Document: {}, 
}; 

export default (state = initialState, action) => { 
    switch (action.type) { 
     case EventTypes.FIRST_CALL_FULFILLED.type: 
      return { ...state, Document: action.payload.body() }; 
     default: 
      return state; 
    } 
}; 

/Redux/Reducers/SecondCall.jsx:

import EventTypes from '../EventTypes'; 
import actions from '../../Components/CardCollection/actions'; 

const initialState = { 
}; 

export default (state = initialState, action) => { 
    switch (action.type) { 
     case EventTypes.SECOND_CALL_FULFILLED.type: 
      const test = action.payload.body(); 
      const val = test.map(data => data.data()); 
      actions.generateDocument(val); 
      return state; 
     default: 
      return state; 
    } 
}; 

/Redux/Reducers/Reducers.jsx:

import { combineReducers } from 'redux'; 

import FirstCall from './FirstCall'; 
import SecondCall from './SecondCall'; 


const reducers = combineReducers({ 
    firstCall: FirstCall, 
    secondCall: SecondCall, 
}); 


export default reducers; 

/Common/Resources/FirstCall.jsx:

import Api from './Api'; 

const Resource = Api.all('firstcall'); 
Resource.init = (data) => { 
    if (data) { 
     const dataObj = JSON.parse(data); 
     return { 
      all: Resource.all, 
      data() { return dataObj; }, 
      save(...args) { 
       if (this.data()[Resource.identifier()]) { 
        return Resource.put(this.data()[Resource.identifier()], this.data(), ...args); 
       } 
       return Resource.post(this.data(), ...args); 
      }, 
      one: Resource.one, 
      url: Resource.url, 
     }; 
    } 
    return undefined; 
}; 

export default Resource; 

/Common/Resources/SecondCall.jsx:

import Api from './Api'; 

const Resource = Api.all('secondcall'); 
Resource.init = (data) => { 
    if (data) { 
     const dataObj = JSON.parse(data); 
     return { 
      all: Resource.all, 
      data() { return dataObj; }, 
      save(...args) { 
       if (this.data()[Resource.identifier()]) { 
        return Resource.put(this.data()[Resource.identifier()], this.data(), ...args); 
       } 
       return Resource.post(this.data(), ...args); 
      }, 
      one: Resource.one, 
      url: Resource.url, 
     }; 
    } 
    return undefined; 
}; 

export default Resource; 

/Components/CardCollection/SearchByType.jsx:

import { connect } from 'react-redux'; 
import actions from './actions'; 
import SearchByTypeComponent from './SearchByTypeComponent'; 

const SearchByType = connect(mapDispatchToProps)(SearchByTypeComponent); 

function mapDispatchToProps(dispatch) { 
    return { 
     firstCall: payload => dispatch(actions.firstCall(payload)), 
    }; 
} 

export default SearchByType; 

/Components/CardCollection/SearchByTypeComponent.jsx:

import React, { Component } from 'react'; 

const propTypes = { 
    ExecuteAPIcall: React.PropTypes.func, 
}; 

class SearchByTypeComponent extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
     }; 
     this.generate = this.generate.bind(this); 
    } 

    generate() { 
     const { ExecuteAPIcall} = this.props; 
     const payload = { 
      var1: false, 
      var2: true, 
      var3: false, 
      var4: 'zert', 
      var5: '', 
      var6: '', 
      var7: '', 
      var8: '', 
      var9: '', 
     }; 
     ExecuteAPIcall(payload); 
    } 

    render() { 
     return (
      <div> 
        <button onClick={this.generate}>Générer</button> 
       </div> 
      </div> 
     ); 
    } 
} 

SearchByTypeComponent.propTypes = propTypes; 

export default SearchByTypeComponent; 

/Components/CardCollection/actions.jsx:

import types from '../../Redux/EventTypes'; 
import FirstCall from '../../Common/Resources/FirstCall'; 
import SecondCall from '../../Common/Resources/SecondCall'; 

function ExecuteAPIcall(specs) { 
    const payload = FirstCall.post(specs); 
    return dispatch => dispatch({ ...types.FIRST_CALL, payload }); 

} 

function ExecuteAPIcallPartTWO(response) { 

    const payloadToPost = { 
     var1: 'ohoy', 
     var2: 'aaha', 
     var3: 'ouhou', 
     var4: response, 
    }; 
    const payload2 = SecondCall.post(payloadToPost); 
    payload2.then(
     () => dispatch => 
      dispatch(
console.log('success!'); 
} 

const actions = { 
    ExecuteAPIcall, 
    ExecuteAPIcallPartTWO, 
}; 

export {actions as default};