oldo.nicho oldo.nicho - 15 days ago 7
Javascript Question

React Native/Redux - Can't access Redux store

I'm trying to access two parts of my Redux store within a React Native component that I'm working on and for some reason, probably something simple, I can't get things working.

I'm passing the

orderID
as a property to the component and then I want to retrieve the appropriate order details from the Redux store:
orders[orderID]
but when trying to assign the local variable:

const order = this.props.orders[orderID];


I'm getting the error:
Cannot read property 'orders' of undefined
, i.e.: for some reason the
orders
part of the Redux store appears to not have
connect
ed to the component props.

Code is as follows:

import React from 'react';
import { connect } from 'react-redux';
import {
View,
Text
} from 'react-native';
import Status from '../Status';
import Card from './Card';
import CardSection from './CardSection';

const OrderDetail = ({ orderID }) => {
const order = this.props.orders[orderID];
const {
id,
status,
gross_price,
currency_symbol,
bookings
} = order;

return (
<Card>
<CardSection>
<View style={styles.headerContentStyle}>
<View style={styles.bookingIdHeaderContainerStyle}>
<Text style={styles.headerTextStyle}>Booking #{id}</Text>
</View>
<View style={styles.grossPriceHeaderContainerStyle}>
<Text style={styles.headerTextStyle}>{currency_symbol}{gross_price}</Text>
</View>
<View style={styles.statusHeaderContainerStyle}>
<Status status={status} />
</View>
</View>
</CardSection>
<CardSection>
<View style={styles.orderListContentStyle}>
<Text>Booking #1234</Text>
</View>
</CardSection>
</Card>
);
};

const styles = {
headerContentStyle: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
headerTextStyle: {
fontSize: 18
},
bookingIdHeaderContainerStyle: {
flex: 5
},
grossPriceHeaderContainerStyle: {
flex: 2
},
statusHeaderContainerStyle: {
flex: 2
},
orderListContentStyle: {

}
};

const mapStateToProps = state => {
return ({
orders: state.orders,
bookings: state.bookings
});
};

export default connect(mapStateToProps)(OrderDetail);


Any suggestions?

Answer

OrderDetail is a stateless functional component, and functional components don't have a this keyword.

May be this is what you wanted:

const OrderDetail = (props) => {
  const order = props.orders[props.orderID];
  // ...