data is fetched but the state is not updated

Question

I'm fetching data from an endpoint. But the state is not updated. it's always undefined.

For some reason this.props.users is undefined. Am I doing something wrong?

After componentDidMount() I trigger the action fetchUsers that send a request to the endpoint. The data is fetched successfully but at the end the state is not updated.

This is my Layout component

class Layout extends Component {
    render() {
        return (
            <div className="container">
                {
                    this.props.users.map((user, key) => {
                        return <a className="list-group-item list-group-item-action active">User #{user.id}</a>
                    })
                }
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        channels: state.users.data,
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchUsers: () =>
            dispatch(user.fetchUsers()),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Layout);

This the action file

export const fetchUsers = () => {

    return (dispatch, getState) => {
        let headers = { "Content-Type": "application/json" };
        return fetch("http://127.0.0.1:3030/api/users/", { headers, })
            .then(res => {
                if (res.status < 500) {
                    return res.json().then(data => {
                        return { status: res.status, data };
                    })
                } else {
                    console.log("Server Error!");
                    throw res;
                }
            })
            .then(res => {
                if (res.status === 200) {
                    dispatch({ type: 'USERS_FETCHED', data: res.data });
                    return res.data;
                }
            })

    }
}

And this is the reducer

const initialState = {
    users: []
};

export default function channels(state = initialState, action) {
    switch (action.type) {
        case 'USERS_FETCHED':
            return { ...state, users: action.data };
        default:
            return state;
    }
}

Answer 1

I think the error comes from your call to the dispatcher in the mapDispatchToProps . Since you are exporting directly the function fetchUsers , you should not be calling user.fetchUsers .

const mapDispatchToProps = dispatch => {
    return {
        fetchUsers: () =>
            dispatch(fetchUsers()),
    }
}