cannot access object from react-redux

Question

I have got the data from reducer and display it in console

but when i want to access specific object for example (table.nomor) and it become error

this is for my reducer:

export const orderListDetailReducer = (state = { orders: {} }, action) => {
switch (action.type) {
    case ORDER_TABLE:
        return {
            orders: action.payload
        }
    default:
        return state;
}
}

this is for my screen:

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { listOrderDetail } from '../actions/orderAction'


const PlaceOrderScreen = (props) => {
const orderId = props.match.params.id
const orderListDetail = useSelector(state => state.orderListDetail)
const { orders } = orderListDetail

const dispatch = useDispatch()

useEffect(() => {
    dispatch(listOrderDetail(orderId))
}, [dispatch, orderId])

console.log(orders.table.nomor);

Try to log orders object in your component. It should contain just the initial state, since useEffect() doesn't change the state in the current render — peter
– peter, Commented Feb 23, 2021 at 15:32
it same, i only can access the object (orders.table), but cannot access the subobject (orders.table.nomor) — surya gafar
– surya gafar, Commented Feb 23, 2021 at 15:51
It's supposed to be the same. I'm trying to say that you don't have problem with access but rather with initialization, since orders is in it's initial state when you try to access its properties. Does it contain orders.table field in initial state? — peter
– peter, Commented Feb 23, 2021 at 15:59

Linda Paiste · Accepted Answer · 2021-02-23 19:48:28Z

Problem: undefined in initial state

The first render of your component happens before the dispatched action has completed its update of the store. That means that the value of state on your first render is the initial value (unless you have already updated the state from some other component).

Your initial state is state = { orders: {} } so the initial value of orders is an empty object {}. You can access orders.table on the empty object, but the value of orders.table is undefined. You cannot access orders.table.nomor because that would be trying to get the property nomor from orders.table which is undefined -- so you get the error "Cannot read property 'nomor' of undefined".

You need to make sure that your component can render properly at any point in the lifecycle, whether or not the ORDER_TABLE action has been completed.

Solution 1: guarded access

You can make sure that orders.table is not undefined before accessing the .nomor property.

const nomor = orders.table ? orders.table.nomor : someDefaultValue;

Or more concisely with optional chaining.

const nomor = orders.table?.nomor; // will be undefined if not able to access

Solution 2: initial value

You can set a deeper initial value object for your reducer which allows you to access orders.table.nomor. This may or may not make sense depending on your app's data structures.

If orders.table is an empty object {} instead of undefined, then it will be ok to access orders.table.nomor. The value of orders.table.nomor in this case is undefined.

const initialState = {
  orders: {
     table: {}
  }
}

You can also go one level deeper and set an initial value for nomor.

const initialState = {
  orders: {
     table: {
       nomor: someInitialValue
     }
  }
}

Either way, you would use this as the initial value for your reducer.

export const orderListDetailReducer = (state = initialState, action) => {

crizcl · Accepted Answer · 2021-02-23 17:59:11Z

1

this is common issue with async behavior on react-redux store, you need to understand useSelector works async and to check the variable with full values you need to use a useEffec, check the following example:

***try the code and tell me how goes :)

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { listOrderDetail } from '../actions/orderAction'


const PlaceOrderScreen = (props) => {
const orderId = props.match.params.id
const orders = useSelector(state => state.orderListDetail.orders)//-->changed this line -->added one level
//const { orders } = orderListDetail //-->commented this line

const dispatch = useDispatch()

useEffect(() => {
    dispatch(listOrderDetail(orderId))
}, [dispatch, orderId])


//-->create new useEffect and add the dependency from useSelector constant
useEffect(() => {
    console.log('orders',orders);
    console.log('nomor',orders.table.nomor);
}, [orders]);

answered Feb 23, 2021 at 17:59

crizcl

1305 bronze badges

1 Comment

crizcl Over a year ago

that can be because of the level on the object try doing a desctructuring like : const { table } = orders ; then console log --> console.log(table.nomor)

Collectives™ on Stack Overflow

cannot access object from react-redux

2 Answers 2

Problem: undefined in initial state

Solution 1: guarded access

Solution 2: initial value

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Problem: undefined in initial state

Solution 1: guarded access

Solution 2: initial value

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related