I can't get a data from backend/data file - node.js

Question

please can someone help me to get the data of products from the backend/data by using Axios.get method to retrieve with the helping of redux store.I do all the steps to get the contain of products but the console send me the initial state empty object so there are all my files :
productActions.js :
import Axios from 'axios';
const PRODUCT_LIST_REQUEST = "PRODUCT_LIST_REQUEST";
const PRODUCT_LIST_SUCCESS = "PRODUCT_LIST_REQUEST";
const PRODUCT_LIST_FAIL = "PRODUCT_LIST_FAIL";
export const listProducts =
() => async (dispatch) => {
dispatch({
type: PRODUCT_LIST_REQUEST
});
try {
const {data} = await Axios.get('/api/products');
dispatch({type: PRODUCT_LIST_SUCCESS, payload: data});
} catch(error) {
dispatch({type: PRODUCT_LIST_FAIL, payload: error.message});
}
}
ProductReducers.js:
const {PRODUCT_LIST_REQUEST} = require('../actions/productActions.js');
const {PRODUCT_LIST_SUCCESS} = require('../actions/productActions.js');
const {PRODUCT_LIST_FAIL} = require('../actions/productActions.js')
export const productListReducer = (state = {loading: true, products: {}}, action) => {
switch (action.type) {
case PRODUCT_LIST_REQUEST:
return {loading: true};
case PRODUCT_LIST_SUCCESS:
return ({loading: false, products: action.payload});
case PRODUCT_LIST_FAIL:
return ({loading: false, error: action.payload});
default:
return state;
}
};
this store.js:
import {createStore, compose, applyMiddleware, combineReducers} from 'redux';
import thunk from 'redux-thunk';
import {productListReducer} from './reducers/productReducers';
const initialState = {};
const reducer = combineReducers({
productList: productListReducer
})
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, initialState, composeEnhancer(applyMiddleware(thunk)));
export default store;
server.js :
import express from 'express';
import {data} from './data.js';
const app = express();
app.get('/api/products', (req, res) => {
res.send(data.categories)
});
app.get('/', (req, res) => {
res.send('server is ready')
});
const port = process.env.port || 5001;
app.listen(port, ()=> {
console.log(`server is runing at http://localhost:${port}`);
})

Answer 1

I am not sure but, I think you must return in your switch cases like this:
return {...state, loading: false, products: action.payload};
Just try all of them like this. And try to console logging the data you get from axios.get. I am pretty sure that you must use JSON.parse(data) before setting it to your payload.