Redux-Saga Getting undefined on componentDidMount()

Question

I'm building a React Component which basically needs to get data from database and load into the Table

AdminActions\index.js // My Action

import {
    SHOW_MESSAGE,
    HIDE_MESSAGE,
    GET_NON_ACTIVE_USERS,
    GET_NON_ACTIVE_USERS_SUCCESS,
} from "constants/ActionTypes";



export const getNonActiveUsers = (options) => {
    return {
        type: GET_NON_ACTIVE_USERS,
        payload: options
    };
};

export const getNonActiveUsersSuccess = (users) => {
    return {
        type: GET_NON_ACTIVE_USERS_SUCCESS,
        payload : users
    };
};


export const showSuccessMessage = (message) => {
    return {
        type: SHOW_MESSAGE,
        payload: message
    };
};

export const hideMessage = () => {
    return {
        type: HIDE_MESSAGE,
    };
};

AdminReducers\index.js // My Reducer

import {
    SHOW_MESSAGE,
    HIDE_MESSAGE,
    GET_NON_ACTIVE_USERS_SUCCESS,

} from "constants/ActionTypes";

const INIT_STATE = {
    alertMessage: '',
    showMessage: false,

};
export default (state = INIT_STATE, action) => {
    switch (action.type) {
        case GET_NON_ACTIVE_USERS_SUCCESS:{
            return {
                ...state,
                users: action.payload,
            }
        }
        case SHOW_MESSAGE: {
            return {
                ...state,
                alertMessage: action.payload,
                showMessage: true,
                loader: false
            }
        }
        case HIDE_MESSAGE: {
            return {
                ...state,
                alertMessage: '',
                showMessage: false,
            }
        }
        default:
            return state;
    } }

AdminSagas\index.js // My Saga

import {all, call, fork, put, takeEvery} from "redux-saga/effects";
import {
    GET_NON_ACTIVE_USERS,
} from "constants/ActionTypes";
import {showSuccessMessage,getNonActiveUsersSuccess } from "../../actions/AdminActions";
import{ base_url } from "../../../util/config";


const getNonActiveUsersRequest = async ({page,limit}) => {
    return await fetch(base_url+"/api/admin/getNonActiveUsers",
        {
            method: 'get',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
                'Authorization' : "Bearer " + JSON.parse(localStorage.getItem('user')).token
            }
        })
        .then(res => res.json())
        .then(data => {
            return data;
        })
        .catch(error => {
            return error;
        });
};

function* getNonActiveUsers(payload) {
    try {
        const response = yield call(getNonActiveUsersRequest,payload);
        if (response.message) {
            yield put(showSuccessMessage(response.message));
        } else {
            yield put(getNonActiveUsersSuccess(response));
        }
    } catch (error) {
        yield put(showSuccessMessage(error));
    }
};

export function* getNonActiveUsersCatcher() {
    yield takeEvery(GET_NON_ACTIVE_USERS, getNonActiveUsers)
}


export default function* rootSaga() {
    yield all([fork(getNonActiveUsersCatcher)
    ]);
}

My Component

import React, {Component} from "react";
import {connect} from "react-redux";
import {Table} from "antd";

import {getNonActiveUsers, hideMessage} from "appRedux/actions/AdminActions/";


const columns = [{
    title: 'Name & Surname',
    dataIndex: 'fullName',
}, {
    title: 'Email',
    dataIndex: 'email',
}, {
    title: 'Phone',
    dataIndex: 'phone',
},{
    title: 'Activation Status',
    dataIndex: 'user_info.activationStatus',
}];



class ActivateInvestors extends Component {
    state = {
        data: [],
        pagination: {},
        loading: false
    };

    componentDidMount() {
       this.props.getNonActiveUsers();

    }


    render() {
      console.log(this.props.users);

        return (
            <Table
                columns={columns}
                rowKey={record => record._id}
                dataSource={this.props.users}
                pagination={this.state.pagination}
                loading={this.state.loading}
                onChange={this.handleTableChange}
            />
        );
    }

}



const mapStateToProps = ({admin}) => {
    const {loader,alertMessage, showMessage, users} = admin;
    return {loader,alertMessage, showMessage, users}
};



export default connect(mapStateToProps, {
    getNonActiveUsers,
    hideMessage,
})(ActivateInvestors);

So the first console.log output is undefined and I dont know how to solve the problem professionally. I can handle with if checks but I dont want to do that.

Output :

I can get the data successfully but I dont know where to assign the values or call the function.

Answer 1

You have to use if checks, coz first time when the render is called your user prop is undefined. After your reducers assigned the value it will get re-render. By the time you'll be seeing the data on the log.

Something like this am using lodash here:

 if (!_.isEmpty(this.props.users)) {
      return (
        <Table
          columns={columns}
          rowKey={record => record._id}
          dataSource={this.props.users}
          pagination={this.state.pagination}
          loading={this.state.loading}
          onChange={this.handleTableChange}
        />
      );
    } else {
      return <p>Loading...</p>;
    }

Answer 2

You first console.log is "undefined", because by the time the render function is executed for the first time, you are still fetching the data from the endpoint. When you finally retrieve the data, you see a re-render of the component, and then you get the values shown in the console.log. You need to explain better what you want to achieve so we can help you better.