Comments (6)
@prescottprue Submitted a PR for this new reducer. The headline is that is' 100x faster for all changes.
The reason is that even single save operations have to round-trip over the network before the snapshot listener fires. For us saving a Firestore transaction in production took a minimum of 1.2s to show the results to the user. That dropped to 6ms. That's over 100x faster.
from redux-firestore.
@prescottprue I've updated our fork and integrated it into our app. Here's an illustration of the issue and the difference between the 2 different reducers.
We're doing internal QA on our app but when it all passes we'd be happy to send a PR.
It does handle both success and failure cases when the firestore save reaches a resolution. Here's a link to our internal PR review to see the details TARAAI#4.
Also we have an additional follow-on feature planned which would unify single document changes, batches, transactions and optimistic updates into a single API call so manually sending an optimistic update would no longer be needed.
from redux-firestore.
Interesting approach, thanks for posting! I would say one downside to this methodology is that if the write breaks a database rule (not confirmed until after the promise completes), then we would also need a way to revert the optimistic change. We would probably also want this to be opt in since it could cause a flash for some cases (would not be expected)
Have you run into those cases?
from redux-firestore.
@puppybits awesome! Thanks for the work making the reducer and sharing - looking forward to the PR
Really like the idea of optimistic updates, so let me know if there is anything I can do to speed up the process of getting this in
from redux-firestore.
We've tested the cache reducer locally and it's all working. But the optimistic update message API was only designed to be used internally. It's too verbose for a consumer.
We just pushed an internal PR to the fork. It both unifies updating the cache reducer and firestore solo, batching and transactions into and single API. It's going through PR review and testing this week.
Changes included:
- Simpler API for changing firestore documents.
- Automatically updated the cache reducer to instantly reflect changes in Redux
- Exposed a config to optionally enable onSnapshot includeMetadataChange
- Added a config for a global FirestoreDataConvertor (We generate global decoder from our Typescript definitions).
const transactionPromise = firestore.mutate({
read: {
myLockedDocument: {
collection: 'path',
doc: 'document-id',
}
},
write: [({ myLockedDocument }) => ({
collection: 'path',
doc: 'document-id' ,
someNumber: myLockedDocument.someNumber + 10
})]
});
// cache reducer has already added the requested changes to
// the in-memory overrides as an optimistic update
transactionPromise.then(() => {
/* change has completed from firestore*/
/* cache reducer has already removed the optimistic update and is using firestore's full query results */
}).catch(() => {
/* failures will also trigger the cache to remove the optimistic overrides */
/* use any of the existing failure messages to be notified and create custom failure functionality */
});
from redux-firestore.
I am suffering from this issue also as I implemented drag & drop in one of by useFirestoreConnect
queries.
@puppybits super excited about taking a look at your PR #335 I noticed the changeset is 68k lines @prescottprue do you have a suggestion on breaking this down into something that could be merged into main and released?
I agree with the architectural, data flow issue: the React component is backed by Redux connected to Firebase, the drag & drop sends the change request to Firebase, that takes ~150ms (most times is faster), the UI flickers between old state and new state, would be lovely to have an optimistic UI system in place for these. ❤️
from redux-firestore.
Related Issues (20)
- storeAs inconsistency
- How to read a deeply nested document?
- Got undenfined firestore state on my next.js app HOT 1
- Typescript: firestore: FirestoreReducer.Reducer; No overload matches this call.
- Support Firebase 8 HOT 12
- Can't update subcollection object HOT 1
- how to populate an array
- When should i not use redux-firestore HOT 4
- Firestore Reducer Type Documentation HOT 3
- Cannot find Reducer in index.d.ts
- Collectiongroup delete not updated
- endBefore not working as expected HOT 3
- ordered reducer duplicated items
- dispatch({ type: actionTypes.CLEAR_DATA }) does not clear 'queries' and 'composite' HOT 2
- Dependency Dashboard
- @firebase/firestore: Firestore (8.2.1): Connection WebChannel transport errored
- StartAfter does not take into consideration documents with similar values (Skips some documents) HOT 1
- The automated release is failing 🚨
- Path,Id is appended on all docs HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redux-firestore.