反應/ Redux從API獲取響應

Question

我不能完全弄清楚如何在我的React前端獲得我從Postman中的api獲得的相同結果。

上下文我送這種性質的JSON格式的來電：

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

，我收到了同樣的事情：

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

但無論我做什麼我不能得到給console.log收到的API答案。

這是我目前的actions.jsx：

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!' })); 
      } 
     }); 
    }; 
} 

這是我的電話一個代碼：

/* ************************************* */ 
/* ********  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; 

，這裏是 「API」：

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

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

Answer 1

好了，所以下面是文件設置我必須破解問題：

我發現的黑客是讓甚至認爲沒有必要在第一次調用減速，並通過它的成功把手搶響應檢查出來：（更好的解決方案最歡迎）

/終極版/事件類型。 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};