Skip to content

prescottprue/redux-firestore

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

redux-firestore

Redux bindings for Firestore. Provides low-level API used in other libraries such as react-redux-firebase

NPM version NPM downloads License Code Style Build Status Code Coverage semantic-release

Gitter

Installation

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

Complementary Package

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)

Overview

API Quick Start

Load data

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>);
};

Saving Data

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} />);
};

Roadmap

  • Automatic support for documents that have a parameter and a subcollection with the same name (currently requires storeAs)
  • Support for Passing a Ref to setListener in place of queryConfig object or string

Post an issue with a feature suggestion if you have any ideas!