Redux action is undefined outside the Promise - reactjs

Question

I've been using async calls with Redux + Promise Middleware like this:
export function getAllFiles() {
const request = axios.get(`${URL}/files`).then(res => res.data);
return { type: "GET_FILES", payload: request };
}
So far it worked, since from my understanding Promise Middleware takes care of this. Also, if I console.log(res.data) inside .then, I will get expected result. However, when I check it from reducer file it's undefined. Can someone please school me if I'm missing something huge.
import React, { Component } from "react";
import { connect } from "react-redux";
import Info from "./../components/Info/info";
import { getAllFiles } from "./../actions";
class HomeContainer extends Component {
componentWillMount = () => {
this.props.dispatch(getAllFiles);
};
render() {
console.log(this.props);
return (
<div>
<Info />
</div>
);
}
}
function mapStateToProps(state) {
return {
files: state.files
};
}
export default connect(mapStateToProps)(HomeContainer);
import { combineReducers } from "redux";
import fileReducer from "./file_reducer.js";
const rootReducer = combineReducers({ wineReducer });
export default rootReducer;
// file_reducer.js
export default function(state = {}, action) {
switch (action.type) {
case "GET_FILES":
return {...state, files: action.payload}
default:
return state;
}
}

Answer 1

The main problem here is your treating, what is clearly an async action, as a synchronous one.
The redux store by default will only deal with action objects, in your case since you need to wait for a result before we fire the action object, we need some middleware to allow the store to handle this.
Have a look at the applyMiddleware function, plenty of links to common thunk middleware and code samples.