React and Redux dispatch function problems - reactjs

Question

I am trying to understand how React, Redux and Axios work together but I just hit a wall and I need some help ...
My problem is that inside the action there is a dispatch but after i return the dispatch it does not continue further.
It's most likely that I do not understand how this works so please try to explain in as much as possible details. Thanks in advance.
my combineReducer
import {combineReducers} from "redux";
import getAvailableDatesReducer from "./getAvailableDatesReducer";
export default combineReducers({
availableDates: getAvailableDatesReducer
});
my reducer
import {FETCH_AVAILABLE_DATES} from "../actions/types";
const initialState = {
availableDates: null
};
const getAvailableDatesReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_AVAILABLE_DATES:
return {...state, availableDates: action.availableDates};
default:
console.log('just default..');
return state;
}
}
export default getAvailableDatesReducer;
my action
export const fetchAvailableDates = (appointmentKey) => {
//return (dispatch) => {
axios.post('/app_dev.php/termin/getavailability/new', {
appointmentKey: appointmentKey
}).then((response) => {
console.log('response received...');
return (dispatch) => {
console.log('not hitting this...');
dispatch({type: FETCH_AVAILABLE_DATES, availableDates: response.data.availability});
};
}).catch(err => {
console.log(err);
});
//}
}
my component
import {fetchAvailableDates} from "../actions";
const Calendar = (props, appointmentKey) => {
useEffect(() => {
fetchAvailableDates(appointmentKey);
}, []);
const mapStateToProps = (state) => {
return {
availableDates: state.availableDates,
}
}
export default connect(mapStateToProps, {fetchAvailableDates})(Calendar);
my index.js file
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import {applyMiddleware, compose, createStore} from "redux";
import reducers from './reducers';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root')
);

Answer 1

First, create an action in your action file:
const fetchDatesAction = (response) => ({
type: FETCH_AVAILABLE_DATES,
availableDates: response.data.availability,
});
Then, update connect
export default connect(mapStateToProps, {fetchDatesAction})(Calendar);
Finally, Call api in useEffect, like this:
useEffect(() => {
axios
.post("/app_dev.php/termin/getavailability/new", {
appointmentKey: appointmentKey,
})
.then((response) => {
console.log("response received...");
return (dispatch) => {
console.log("not hitting this...");
props.fetchDatesAction();
};
})
.catch((err) => {
console.log(err);
});
}, []);

Answer 2

Thunk is a library which is responsible for handling side-effects in state management for redux.
Redux is a simple pure function which accepts state and action as an input and based on these two, it returns a new state. So its pretty simple and straight forward.
Now in certain scenarios like the one you have mentioned in your example, we need to perform some asynchronous actions which may not provide immediate result but a promise. In that case, we need to use a third party tool which is also called as enhancer.
That's the reason why you have added
const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));
Now when asynchronous action is triggered, it goes to thunk. Thunk processes the request and then triggers one more action which again goes to reducer.
Now reducer being a pure function, does not distinguish between these sources of event and simply update the state based on action and its payload.
Hope this diagram helps you understand the concept.
https://miro.medium.com/max/1400/1*QERgzuzphdQz4e0fNs1CFQ.gif