4 ms·

I've been using Firestore in a React app and I love how it has simplified everything. There's no need to have redux or even an in-memory store in the "context"

I've been using Firestore in a React app and I love how it has simplified everything. There's no need to have redux or even an in-memory store in the "context". I just wrap my components with a withFSQuery helper and it automatically updates even when the state changes "server-side".

jen729w 8y ago
Would you have time to elaborate? I’m just starting to set up a React-Firestore app but I’m a bit of a n00b. I’m using re-base [0] to synchronise Firestore to my local state. Do I not need to be? Any pointers gratefully received, thanks. [0]: https://github.com/tylermcginnis/re-base https://github.com/tylermcginnis/re-base
- bcheung 8y ago
  I didn't use any library. Seemed easy enough to just create a few helpers. I rely on Firebase completely for the data. Since Firebase already keeps a local client cache as well as an offline cache, I didn't see any need to maintain separate state in React -- outside of the HOC components. They subscribe automatically to the data when the component mounts and unsubscribe when the component is destroyed. Any changes, whether from within the app, from the server, or from another instance of the app; have changes synced everywhere for free. The only local state I have at the app level is state that doesn't get stored in the DB. Here's the helper HOC I created for it: https://github.com/brennancheung/wowzrs/blob/master/src/app/core/FSQuery.js https://github.com/brennancheung/wowzrs/blob/master/src/app/... And an example of it being used as a render prop: https://github.com/brennancheung/wowzrs/blob/master/src/app/components/actions/ActionsList.js#L34 https://github.com/brennancheung/wowzrs/blob/master/src/app/... And another as an HOC: https://github.com/brennancheung/wowzrs/blob/master/src/app/components/actions/ActionsForToday.js#L33 https://github.com/brennancheung/wowzrs/blob/master/src/app/... And here's a mutation: https://github.com/brennancheung/wowzrs/blob/master/src/app/components/actions/AddAction.js#L14 https://github.com/brennancheung/wowzrs/blob/master/src/app/... The HOC's make it so you can create just plain stateless functional components and not have to worry about componentDidMount.

jen729w 8y ago

Would you have time to elaborate? I’m just starting to set up a React-Firestore app but I’m a bit of a n00b. I’m using re-base [0] to synchronise Firestore to my local state. Do I not need to be? Any pointers gratefully received, thanks. [0]: https://github.com/tylermcginnis/re-base https://github.com/tylermcginnis/re-base

bcheung 8y ago
I didn't use any library. Seemed easy enough to just create a few helpers. I rely on Firebase completely for the data. Since Firebase already keeps a local client cache as well as an offline cache, I didn't see any need to maintain separate state in React -- outside of the HOC components. They subscribe automatically to the data when the component mounts and unsubscribe when the component is destroyed. Any changes, whether from within the app, from the server, or from another instance of the app; have changes synced everywhere for free. The only local state I have at the app level is state that doesn't get stored in the DB. Here's the helper HOC I created for it: https://github.com/brennancheung/wowzrs/blob/master/src/app/core/FSQuery.js https://github.com/brennancheung/wowzrs/blob/master/src/app/... And an example of it being used as a render prop: https://github.com/brennancheung/wowzrs/blob/master/src/app/components/actions/ActionsList.js#L34 https://github.com/brennancheung/wowzrs/blob/master/src/app/... And another as an HOC: https://github.com/brennancheung/wowzrs/blob/master/src/app/components/actions/ActionsForToday.js#L33 https://github.com/brennancheung/wowzrs/blob/master/src/app/... And here's a mutation: https://github.com/brennancheung/wowzrs/blob/master/src/app/components/actions/AddAction.js#L14 https://github.com/brennancheung/wowzrs/blob/master/src/app/... The HOC's make it so you can create just plain stateless functional components and not have to worry about componentDidMount.