Cannot access nested data object from redux inside component

Question

I am using react and redux and I have an object which is store on redux, above screenshot is the data state on redux being map to props inside a component:

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

    componentWillMount() {
        this.props.dispatch(fetchUsers());
    }

    render() {
        console.log(this.props.users);
        return (
            <div className="users">
            {React.cloneElement(this.props.children, {
                this.props.users
            })}
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    users: state.users[0]
});

export default connect(mapStateToProps)(Users);

// reducer
import { createReducer } from '../utils/helpers';
users: createReducer(initialData, {
    [FETCH_USERS](state, action) {
        return [action.payload, ...state];
    }
}),

//saga
function* watchFetchUsers() {
    while(true) {
        yield take(FETCH_USERS);
        try {
            const users = yield call(api.fetchUserData);
            yield put({ type:FETCH_USERS, payload: users });    
        } catch (err) {
            yield put({ type:SIGNOUT, status: err });
        }
    }
}

the problem is I can log this data with console.log(this.props.users) but I can't access the data within with console.log(this.props.users.data) or console.log(this.props.users.data[0]) which came back with error 'data' undefined. Anyone can advice me what the problems are?

This question is confusing... Is users a array or a object? Are this users fetched asynchronously? — Canastro
– Canastro, Commented Feb 18, 2017 at 12:44
the props users is an object. Yes, I have an action dispatched which fetch the users in componentWillMount() function. — Bryan Foong
– Bryan Foong, Commented Feb 18, 2017 at 13:10
Can you post your reducer code, so we can get a better understanding of the state? — Oro
– Oro, Commented Feb 18, 2017 at 13:35
Your screenshot shows two keys in your store - data and included - so state.users is going to be undefined. — Andy_D
– Andy_D, Commented Feb 18, 2017 at 14:40
@OrB I have added the flow of my codes, sorry wasn't being clear initially. — Bryan Foong
– Bryan Foong, Commented Feb 18, 2017 at 15:24

Bryan Foong · Accepted Answer · 2017-02-18 19:30:25Z

1

Ok I think I can't reference the nested data initially is because the data is not rendered into the component yet as it was dispatching an action to retrieve the data asynchronously, hence returning 'data' undefined error. I got this to work by using state to check if the data is ready:

constructor(props) {
    super(props);
    this.state = {
        data: null
    };
}

componentWillReceiveProps(nextProps) {
    if (nextProps) {
        this.setState({
            data: true
        });
    }
}

render() {
    return (
        <div className="users">
            {this.state.data ? React.cloneElement(this.props.children, {
                users: this.props.users
            }) : ''}
        </div>
    );
}

answered Feb 18, 2017 at 19:30

Bryan Foong

1581 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot access nested data object from redux inside component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related