Does not show API fetch response data in the page - React Redux - reactjs

Question

I'm trying to show a list of recipes from an API in my component when a form submitted. It doesn't show any result in the component and doesn't have any error!
May somebody help me , What's wrong with my code ?
here is my action.js
import { getDataConstants } from "../_constants";
import { getDataService } from "../_service";
export const getDataAction = {
fetchRecipes
}
function fetchRecipes(query) {
return dispatch => {
dispatch(loading());
getDataService.fetchRecipes(query).then(
response => {
dispatch(success(response));
},
error =>{
dispatch(failed(error));
}
)
}
function loading() { return { type: getDataConstants.FETCH_RECIPES_LOADING }; }
function success(data) { return { type: getDataConstants.FETCH_RECIPES_SUCCESS, data }; }
function failed(error) { return { type: getDataConstants.FETCH_RECIPES_FAILED, error }; }
}
code for reducer.js
import { getDataConstants } from "../_constants";
const initialState = {
loading: false,
items: [],
error: null
};
export function getDataReducer(state = initialState, action) {
switch (action.type) {
case getDataConstants.FETCH_RECIPES_LOADING:
return {
...state,
loading: true,
error: null,
items: []
};
case getDataConstants.FETCH_RECIPES_SUCCESS:
return {
...state,
loading: false,
items: action.payload
};
case getDataConstants.FETCH_RECIPES_FAILED:
return {
...state,
loading: false,
error: action.payload,
items: []
};
default:
return state;
}
}
export const getRecipes = state => state.items;
export const getRecipesloading = state => state.loading;
export const getRecipesError = state => state.error;
I fetch data in the service.js component
code for service.js
import {TIMEOUT_DELAY,HOST} from '../_constants';
import axios from 'axios';
export const getDataService = {
fetchRecipes
}
async function fetchRecipes(query) {
let timeout = null;
try{
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
timeout = setTimeout(()=>{source.cancel()},TIMEOUT_DELAY);
debugger
const response = await axios({
url: `${HOST}?apiKey=94be430aadf644f6a8c8c95abbcce4c1&query=${query}&_number=12`,
method: "get",
headers: { "content-type": "application/json" },
cancelToken: source.token
});
if (response.status === 200) {
if (timeout) clearTimeout(timeout);
return response.data;
} else {
if (timeout) clearTimeout(timeout);
return Promise.reject({isTimeout:false,error: response.data});
}
}catch (error) {
if (timeout) clearTimeout(timeout);
if (axios.isCancel(error)) {
return Promise.reject({isTimeout:true});
} else {
return Promise.reject({isTimeout:false,error});
}
}
}
code for Recipes component where API response data shown
const Recipes = props => {
const { dispatch, error, loading, items } = props;
const classes = useStyles();
const [query, setQuery] = useState("beef");
const submitHandler = async event => {
event.preventDefault();
dispatch(getDataAction.fetchRecipes(query));
};
const handleChange = event => {
setQuery(event.target.value);
};
return (
<>
<form onSubmit={submitHandler} className={classes.formWidth}>
<input
type="text"
value={query}
onChange={handleChange}
className={classes.input}
/>
</form>
{error && <div>Something went wrong ...</div>}
{loading ? (
<div>
<img src={Loading} alt="Loading" />
</div>
) : (
<ul className={classes.centeredDiv}>
{items &&
items.results.map(recipe => (
<li
className={classes.media}
image={`${imgUrl}${recipe.image}`}
title={recipe.title}
/>
))}
</ul>
)}
}
</>
);
}
const mapStateToProps = state => {
return {
loading: getRecipesloading(state),
items: getRecipes(state),
error: getRecipesError(state)
};
};
Sorry about the large amount of code dumped, its just all related and I believe the error lies somewhere.

Answer 1

Your reducer expects action.payload but instead you send action.data. It should be:
case getDataConstants.FETCH_RECIPES_SUCCESS:
return {
...state,
loading: false,
items: action.data
}

Answer 2

You should update your success and failed functions like so:
function success(data) {
return {
type: getDataConstants.FETCH_RECIPES_SUCCESS,
payload: data
};
}
function failed(error) {
return {
type: getDataConstants.FETCH_RECIPES_FAILED,
payload: error
};
}
To avoid such typo problems you can create default action creator:
function createAction(type, payload, meta) {
return {
type: type,
payload: payload,
meta: meta
};
}
// usage
function success(data) {
return createAction(getDataConstants.FETCH_RECIPES_SUCCESS, data)
}