i can see props coming from action(redux) in console logs but can't access on window. Giving TypeError: Cannot read prop 'rest' of undefined

Question

So I'm new to all react and redux thing and after few tuts and blogs, I'm trying to create a react-redux app. I'm hitting an API to fetch some data.

reducer looks like this:

const initialState ={
rest: null,
rests: null,
loading: false
}

export default function(state = initialState, action){
switch (action.type){
    case REST_LOADING:
    return{
        ...state,
        loading: true
    }
    case GET_REST:
    return {
        ...state,
        rest: action.payload,
        loading: false
    }

Action:

export const getCurrentRest = name => 
dispatch(setRestLoading());
axios.get(`/api/restaurant/rest/${name}`)
    .then(res =>
        dispatch({
            type: GET_REST,
            payload: res.data
        })
    )
    .catch(err =>
        dispatch({
            type: GET_REST,
            payload: {}
        })
    );
}

Now I'm calling this action on a page something like this:

class CafeMenu extends Component {
name = this.props.match.params.id;

constructor(props) {
    super(props);

}
componentDidMount() {

   this.props.getCurrentRest(this.name);
}

in the render part, I did some destructuring. initially:

const {rest, loading} = this.props.rest;

later i changed it to

const {rest} = this.porps.rest;

now I can see the data in the console logs and state changes in redux devtools extension but when I try to access it through rest.name or this.rest.rest.name without destructuring it throws typeError, say cannot read property 'rest' of undefined. I tried everything but couldn't figure out what I did wrong and how to resolve this further and stuck at this.

initially i also did something like :

 if(rest === undefined || null){
<h1> loading</h1>
}
else{
reder...

and the console.log of this.props.rest is

{rest: Array(1), rests:null, loading: false}
loading: false
rest: Array(1)
0:
 email: "something@abc.com"
 loc: {long: "23.34", lat: "43"}
 loc_name: "abc"
 menu: []
 name: "xyz"
 ...

Answer 1

Looks like you're not properly destructing your props.

Also there's a typo here porps instead of props .

const { rest } = this.porps.rest;

This can be the reason it throws typeError.

Now for destructing part. Assuming this is your props structure

{rest: Array(1), rests:null, loading: false}

loading: false
rest: Array(1)
    0:
        email: "something@abc.com"
        loc: {long: "23.34", lat: "43"}
        loc_name: "abc"
        menu: []
        name: "xyz"
rests: null

Here's to access via destructing:

const { loading, rest, rests } = this.props

The values will be

loading = false
rest = Array(1)
       0:
          email: "something@abc.com"
          loc: {long: "23.34", lat: "43"}
          loc_name: "abc"
          menu: []
          name: "xyz"
rests = null

Now since rest is an array, to access the first restaurant name the rest[0].name should give you "xyz" .

Let me know if this helps.