redux-firestore

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

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

• Getting Started
  • Components
  • Functional Components
  • Class Components
• API
  • Mutate
    • Optimistic Writes
    • Creation
    • Updates
    • Batches
    • Transactions
    • Atomic Updates
    • Not Supported
  • Query
    • Syntax
    • Types
    • Population
    • Config Options
  • Cache Reducer
  • Structure

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!