undefined data from my action creator ? React/redux/thunk - reactjs

Question

I'm trying to make an async action using Redux-thunk. I'm still don't really understanding how Async call works with Redux-Thunk but I'm beginning to get a few things. I know that :
I need an Action-Creator
Some actions related to my Action-creator (something like "I'm calling the data", "I'm waiting for then", "Got it", "Oups there is an error")
Not sure about this but I need a Reducer to handle the action dispatched by my Action-Creator.
To start slowly I just want to pass some data into my redux-store-state. So I can check it through the react dev tool.
My Action-Creator and my Actions :
function loadData(dispatch) {
return axios.get(`http://localhost:3000/authors`)
.then(res => res.json())
.then(
data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
);
}
export function loadData(data) {
return {
type: LOAD_DATA_SUCCESS,
data
}
}
export function failData(data) {
return {
type: LOAD_DATA_FAILURE,
err
}
}
To make sure that my local URL is sending the data correctly with axios I've also done this :
export function fetchData() {
axios.get('http://localhost:3000/authors')
.then(function (response) {
console.log(response);
})
}
My reducer :
const ThunkData = (state = {}, action) => {
switch (action.type) {
case 'LOAD_DATA_SUCCESS':
return Object.assign({}, state, {
data: action.data,
});
case 'LOAD_DATA_FAILURE':
return action.err
default:
return state;
}
};
My client.js where I'm dispatching my Action-Creator with store.dispatch(loadData()); :
const loggerMiddleware = createLogger();
function configureStore(preloadedState) {
return createStore(
todoApp,
preloadedState,
applyMiddleware(
thunkMiddleware,
loggerMiddleware
), window.devToolsExtension ? window.devToolsExtension() : f => f
)
}
const store = configureStore()
store.dispatch(loadData());
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('test')
);
When I launch my app I have a ThunkData object in my store with a data object but undefined. I'm guessing there is something wrong on how my action creator is passing the data and how my reducer is receiving it.
Thanks.

Answer 1

export function loadData(data) {
return {
type: LOAD_DATA_SUCCESS,
data
}
}
export function failData(data) {
return {
type: LOAD_DATA_FAILURE,
err
}
}
These two functions are redundant in your action file. Remove them and add an export to the first loadData function. Rest of the code is fine.