Dispatching Action inside Fetch - react-native

Question

I am making an async call using fetch and then trying to set state by dispatching an action based on the result of the json data returned.
I am using a QR code reader to read a code which is passed to my didScan method.
didScan(code) {
if (this.state.showCamera){
this.props.pushNewRoute('finder');
getAppointment(code)
.then((appointment)=>{
if (appointment.valid){
this.props.appointmentDetails(appointment);
this.props.resetRoute('summary');
}else{
this.props.resetRoute('error');
}
})
.catch((error) => {
this.props.resetRoute('error');
});
this.setState({showCamera: false});
}
}
I am using react-redux to bind my actions to my dispatchers like this:
function bindActions(dispatch){
return {
resetRoute:(route)=>dispatch(resetRoute(route)),
pushNewRoute:(route)=>dispatch(pushNewRoute(route)),
appointmentDetails:(details)=>dispatch(appointmentDetails(details))
}
}
export default connect(null, bindActions)(Scanner);
but when the promise is returned by my getAppointment service it fails when it tries to do the routing.
this.props.resetRoute('summary');
The error is
Possible unhandled promise rejection{id:0}
Reducers may not dispatch actions
None of my reducers dispatch any actions and the code works fine when I take it out of the Promise .then() block.
Here is the simple getAppointment fetch service for completeness:
export function getAppointment(id:string) {
return fetch('http://myurl/' + id + '/')
.then((response) => response.json())
.catch((error) => {
console.error(error);
return error;
});
}
Any help greatly appreciated.

Answer 1

I'm not sure what your syntax is for binding the actions, haven't seen it before. Here's a sample of code that I made for a project where I do a get request and then set the response as state:
SearchBar.jsx (this does a http request to Solr and gets a JSON object back, then sets that object as the state)
import React, {Component} from 'react';
import httpClient from 'axios';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {setResponse} from '../actions/index'
class SearchBar extends Component {
constructor(props) {
super(props);
this.search = this.search.bind(this);
}
search() {
let q = document.getElementById('searchbar').value;
httpClient(`/search?q=${q}`, { baseURL: window.location.href })
.then( resp => {
console.log(resp);
this.props.setResponse(resp);
});
}
render() {
return (
<div>
<input type='text' id='searchbar'/>
<button onClick={this.search}>Search</button>
</div>
);
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({setResponse: setResponse}, dispatch);
}
export default connect(null, mapDispatchToProps)(SearchBar);
This is the action:
export const setResponse = (res) => {
return {
type: 'RESPONSE_RECEIVED',
payload: res
}
};
This is the reducer:
export default function (state = null, action) {
switch (action.type) {
case 'RESPONSE_RECEIVED':
return action.payload;
break;
}
return state;
}
Which is exported to a combining function (though there is only one reducer atm):
import {combineReducers} from 'redux';
import ResponseReducer from './reducer-response';
const allReducers = combineReducers({
response: ResponseReducer
});
export default allReducers;