CODEWITHSUNDEEP
javascriptreactjsredux
Rick Jolly
Rick Jolly

Reputation: 2999

Redux not updating a component

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.

Upvotes: 2

Views: 495

Answers (2)

mr-wildcard
mr-wildcard

Reputation: 550

This may not be the case in your real code, but from what I can see in your code samples: in deletePhoto method, calling filter should throw a TypeError as photos is undefined in your initial state.

There is no problem at all with deeply nested properties as long as a new state is returned. It can becomes cumbersome at some point but libraries like ImmutableJS help us to manage very complex kind of state. A view not being updated after calling an action is a common problem usually caused by mutated state: http://rackt.org/redux/docs/Troubleshooting.html

Upvotes: 1

Rick Jolly
Rick Jolly

Reputation: 2999

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.

Upvotes: 0

Related Questions