React-redux-firebase: bug(redux-firestore): delete does not remove item from data state

[cosminstefanxp]

Current behaviour

When attaching a component to a Firestore collection, firestoreConnect and a remote deletion occurs in the data, a state change is triggered, state.firestore.ordered.{collection} gets updated, but state.firestore.data.{collection} is not.

Seems that updating or adding items works though...

Reproduction steps

1. Attach a component via firestoreConnect, passing in a collection name, and create a prop value based on the state:

const GiftList: React.SFC<{ gifts: any[], orderedGifts: any[]}> = (props) => {
    logger.debug('Received props:', props);
    return <div/>
};

export default compose(
    firestoreConnect([
        {collection: 'gifts'},
    ]) as InferableComponentEnhancer<{}>,
    connect(
        (state: AppState) => {
            logger.debug('Received state:', state);
            return {
                gifts: state.firestore.data.gifts,
                orderedGifts: state.firestore.ordered.gifts,
            };
        },
    ),
)(GiftList);

1. Remove one of the documents on Firestore via the dashboard (or change a field used in a where filter so that an item is no longer in the dataset);
2. Analyze the props received by the GiftList:
3. gifts contains the old data, still with the removed item
4. orderedGifts contains new data, without the removed item

Expected behavior

When a change occurs in the database, the component is provided with the latest

Versions

"react-redux": "5.0.6",
"react-redux-firebase": "2.0.4",
"redux": "3.7.2",
"redux-firestore": "0.2.8",

[prescottprue]

Seems to be a duplicate of issue 45 on redux-firestore.

Going to leave this open to hopefully prevent further duplicates. Thanks for reporting.

[prescottprue]

A fix for this is in to the current progress for v0.3.0.

Since it could potentially be breaking for some a new config option was added (to redux-firestore only) called preserveOnDelete. It accepts an object which indicates what should be preserve for each slice of state when the DELETE_SUCCESS action type is dispatched. The value for what to preserve can be a a list of keys, true for the whole slice, or a function which returns the new slice of state.

[prescottprue]

v0.3.0 of redux-firestore was released with the fix as mentioned - the item within data is set to null.

Remember that there is the preserveOnDelete if you need to keep things when deleting.

Let me know if it doesn't function as expected. Thanks for reporting!

[cosminstefanxp]

Thanks for looking into this. I'll check! 👍

[Wgil]

Hey,

Where should I add preserveOnDelete key? in redux-firestore or react-redux-firebase config? None of them are working for me, I'd like to delete the whole key without preserving anything. I'm using:

"react-redux-firebase": "^2.1.9",
"redux-firestore": "^0.7.0",

[prescottprue]

@Wgil If you are intended to preserve nothing, then you don't need to provide preserveOnDelete (which is for preserving data)

[Wgil]

@prescottprue I don't have the preserveOnDelete key set and when I delete a document from firestore, it's being set as null in data.storeKey.id. Is this the expected behavior?

[prescottprue]

@Wgil Yes - null allows the client to know that data has loaded, but does not exist. Matching if you were to try to query a document that does not exist. In this case, both isLoaded and isEmpty will be true, where if it is undefined, isLoaded will return false (since the client is not yet aware of if data exists in that part of Firebase/Firestore)