Redux not updating a component

- 1 answer

Ad

I have a component that is passed a "user" prop from Redux that looks something like this:

user: {
    user: {
        photos: []
    },
    userIsFetching: false,
    userIsFetchError: false
}

When "photos" is updated, React will not rerender. I can see in the Redux log that "photos" does get updated. Is this problem due to "photos" being deeply nested?

Here's the reducer:

function deleteUserPhoto(user, id) {
    return {
        ...user,
        photos: deletePhoto(user.photos, id)
    };
}

function deletePhoto(photos, id) {
    return photos.filter(photo =>
        photo.id !== id
    );
}

export function user(state, action) {

    if (typeof state === 'undefined') {
        state = {
            user: null,
            userIsFetching: false,
            userIsFetchError: false
        }
    }

    switch (action.type) {
        case USER_REQUEST:
            return {
                ...state,
                userIsFetching: true
            };
        case USER_RESPONSE:
            return {
                ...state,
                user: action.user
            };
        case USER_RESPONSE_ERROR:
            return {
                ...state,
                userIsFetching: false,
                userIsFetchError: true
            };
        case PHOTO_DELETE:
            return {
                ...state,
                user: deleteUserPhoto(state.user, action.id)
            };
        default:
            return state;
    }
}

Thanks.

Ad

Answer

Ad

My stupid mistake. The props were updating but I was checking the state (which was initialized by the props) and I didn't update the state on prop change. I was only using state because it's required by the dropzone mixin I'm using.

Ad
source: stackoverflow.com
Ad