Given action, reducer returned undefined - reactjs

Question

I'm doing my first react.js app. Because of some issues with the react & redux template project in Visual Studio 2017 I ended up with a Web API in Visual Studio 2017 and a whole different react project in Visual Studio Code (I don't know if that is relevant). I'm trying to consume my Web API but my action.payload.data is always undefined. Also I get a cross-origin error. I don't get what am I doing wrong.
src/actions/index.js
import axios from 'axios';
export const FETCH_HOME = 'fetch_home';
const R00T_URL = 'http://localhost:52988/api';
export function fetchHome() {
const request = axios.get(`${R00T_URL}/home`, { crossdomain: true });
console.log(`request: ${request}`);
return {
type: FETCH_HOME,
payload: request
};
}
src/reducers/reducer_home.js
import { FETCH_HOME } from '../actions';
export default function(state = {}, action) {
if (typeof action.payload === 'undefined') {
console.log('action undefined');
return state;
}
switch (action.type) {
case FETCH_HOME:
console.log(`action: ${action}`);
return action.payload.data;
default:
return state;
}
}
src/components/home_index.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchHome } from '../actions';
class HomeIndex extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.fetchHome();
}
render() {
console.log(`props: ${this.props}`);
return (
<div>
<h1>Home Index</h1>
</div>
);
}
}
function mapStateToProps(state) {
return { props: state.props };
}
export default connect(mapStateToProps, { fetchHome })(HomeIndex);
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route } from 'react-router-dom';
import reducers from './reducers';
import HomeIndex from './components/home_index';
import promise from 'redux-promise';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Route path="/" component={HomeIndex} />
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));

Answer 1

Your call to axios.get() is asynchronous.
You likely want your action creator to return the action object, like this:
src/actions/index.js
...
export function fetchHome(result) {
return {
type: FETCH_HOME,
payload: result
}
}
...and then perform the async request in your component and call the action creator with the results:
src/components/home_index.js
...
componentDidMount() {
axios.get(`${R00T_URL}/home`, { crossdomain: true })
.then(result => {
console.log(`result: ${result}`);
this.props.fetchHome(result)
})
.catch(err => {
// Handle error
})
}
...
If you want to keep the async part in your action creator then look at using redux-thunk:
https://www.npmjs.com/package/redux-thunk