Redux not updating a component
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
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad