Get data with redux

0

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}`);
})

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.