React-redux-firebase: bug(reducer): DELETE_SUCCESS action causes item to be added back to ordered state causing "flicker"

Created on 30 Aug 2018  ·  4Comments  ·  Source: prescottprue/react-redux-firebase

Do you want to request a feature or report a bug?
Bug
(If this is a usage question, please do not post it here—post it on gitter. If this is not a “feature” or a “bug”, or the phrase “How do I...?” applies, then it's probably a usage question.)

What is the current behavior?
I currently have two listeners setup via firestoreConnect. One is for the parent collection 'users' at a specific document and the other for its subcollection 'trips'.

When I delete an item, the follower actions are fired:
screen shot 2018-08-30 at 2 09 09 pm
screen shot 2018-08-30 at 2 09 27 pm
screen shot 2018-08-30 at 2 09 37 pm
screen shot 2018-08-30 at 2 09 52 pm
screen shot 2018-08-30 at 2 10 00 pm

What happens here, is that the item gets deleted on the subcollection listener catching it, then delete success re-adds the key with a null value, the next listener response re-inserts the entire value and the last one deletes it, which causes my list (from which i performed the delete) to flicker.

Here is what my listeners look like:
export default firestoreConnect((props, store) => ([ { collection: 'users', doc: store.firebase.auth().currentUser.uid }, { collection: 'users', doc: store.firebase.auth().currentUser.uid, subcollections: [ { collection: 'trips' } ], storeAs: 'trips' }, ]))(withNavigation(withFirebase(connect(mapStateToProps)(Trips))));

and the delete function:
this.props.firestore.delete({ collection: 'users', doc: this.props.firebase.auth().currentUser.uid, subcollections: [ { collection: 'trips', doc: trip.id } ], });

Any ideas?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.

What is the expected behavior?
The delete should not re-insert the deleted item or its key via the listener.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?
Using:
"redux-firestore": "^0.5.8"
and
"react-redux-firebase": "^2.2.0-alpha" (switched to this version hoping it was fixed here)

Thanks! And great work on redux-firebase and redux-firestore, it saved me a ton of time.

bug in-pre-release

All 4 comments

Going to look into replicating, but at first glance, it seems like the following may be related:
113, 115, and/or 116 issues of redux-firestore

In the meantime: storeAs allows you to store your data in redux under different paths, so you can make your two separate queries not collide within redux.

I do use storeAs right now, so the subcollection in stored under 'trips', but I notice this behaviour regardless

In the v1.0.0-* version series (still under @alpha tag) of redux-firestore data is stored by query name instead of collection name which should address this issue. There is also state selection helpers so that it is easy to use the same config for your queries and state selection.

Going to leave it open until things are a bit more released/documented.

Going to close since tracking is on redux-firestore

Was this page helpful?
0 / 5 - 0 ratings