Reducer passing state as props in a component undefined

manpreet Best Answer 2 years ago

My Reducer and Actions are working fine and I am logging my data through, but my logs in component where I am consuming my reducers state returns props as [object object], I am sure I am not logging it correctly or reading the json in right format. Here is the code:

reportReducer.js

import { GET_REPORTS, GET_REPORT_BY_ID } from '../actions/types';
const initialState = {
    reports: [],
    report: {}
};

export default function(state = initialState, action) {
    switch (action.type) {
        case GET_REPORTS:
            return {
                ...state,
                reports: action.payload
            };
        case GET_REPORT_BY_ID:
            return {
                ...state,
                report: action.payload
            };
        default:
            return state;
    }
}

reportActions.js

import {GET_REPORTS, GET_REPORT_BY_ID} from './types';
import axios from 'axios';

export const getReports = () => async dispatch => {
    const res = await axios.get(`/api/report`);
    dispatch({
        type: GET_REPORTS,
        payload: res.data
    });
};

export const getReportById = id => async dispatch => {
    const res = await axios.get(`api/report/${id}`);
    console.log(res.data);
    dispatch({
        type: GET_REPORT_BY_ID,
        payload: res.data
    });
};

ReportById.jsx

import React, {Component} from 'react';
import {getReportById} from '../../actions/reportActions';
import {connect} from 'react-redux';

class ReportById extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount = async () => {
        this.props.getReportById(this
                                                

                                                                                                        
                                                    
                                                
                                                

                                                    

                                                        
                                                            0
                                                            views 

                                                            0
                                                                likes 
                                                            
                                                            

                                                            0
                                                            shares
                                                            


    

         Facebook
        
         Twitter
        
        
         Linked In 
        
          WhatsApp