Redux bindings for Firestore. Provides low-level API used in other libraries such as react-redux-firebase
npm install redux-firestore --save
This assumes you are using npm as your package manager.
If you're not, you can access the library on unpkg, download it, or point your package manager to it. Theres more on this in the Builds section below
Most likely, you'll want react bindings, for that you will need react-redux-firebase. You can install the current version it by running:
npm install --save react-redux-firebase
react-redux-firebase provides withFirestore
and firestoreConnect
higher order components, which handle automatically calling redux-firestore
internally based on component's lifecycle (i.e. mounting/un-mounting)
Construct a Firestore query, attach listeners for updates and get the data from the selector.
const MyController = () => {
// 1. construct query
const taskQuery = {
collection: `workspace/MySpace/tasks`,
where:[
['status', '<', 1],
['deleted', '==', false]
],
orderBy: ['createdAt', 'desc'],
storeAs: 'tasksStarted',
}
// 2. load & attached listeners for document changes
useFirestoreConnect([taskQuery]);
// 3. Get results
const tasks = useSelector(state =>
state.firestore.cache['tasksStarted'].docs
);
// 4. Display when the data returns
return (<ol>
{tasks && tasks.map(({id, title}) => (
<li key={id}>title</li>
))}
</ol>);
};
Use redux-firestore's mutate function to queue changes to Firestore and see the optimitic results instantly in the UI.
const MyController = (task) => {
const changeTitle = useCallback(({id, path, title}) => {
dispatch(
createMutate({
doc: id,
collection: path,
title
}))
.catch((error) => { alert(error) });
})
return (<TaskView onSave={changeTitle} />);
};
storeAs
)setListener
in place of queryConfig
object or stringPost an issue with a feature suggestion if you have any ideas!