{"id":13468591,"url":"https://github.com/prescottprue/react-redux-firebase","last_synced_at":"2025-05-12T13:14:12.503Z","repository":{"id":38007815,"uuid":"70860202","full_name":"prescottprue/react-redux-firebase","owner":"prescottprue","description":"Redux bindings for Firebase. Includes React Hooks and Higher Order Components.","archived":false,"fork":false,"pushed_at":"2024-11-18T21:44:41.000Z","size":25014,"stargazers_count":2549,"open_issues_count":135,"forks_count":555,"subscribers_count":39,"default_branch":"main","last_synced_at":"2025-05-08T17:22:43.403Z","etag":null,"topics":["firebase","react","react-bindings","redux","redux-bindings","redux-firebase","redux-observable","redux-thunk"],"latest_commit_sha":null,"homepage":"https://react-redux-firebase.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prescottprue.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":"prescottprue","open_collective":"react-redux-firebase"}},"created_at":"2016-10-14T00:47:53.000Z","updated_at":"2025-05-01T14:23:49.000Z","dependencies_parsed_at":"2024-04-04T00:23:20.945Z","dependency_job_id":"d952b581-98c9-4a49-8977-9f95c532e903","html_url":"https://github.com/prescottprue/react-redux-firebase","commit_stats":{"total_commits":711,"total_committers":119,"mean_commits":5.974789915966387,"dds":0.8016877637130801,"last_synced_commit":"befe3b962b449227d618c014956cfeefc6fe8044"},"previous_names":[],"tags_count":158,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prescottprue%2Freact-redux-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prescottprue%2Freact-redux-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prescottprue%2Freact-redux-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prescottprue%2Freact-redux-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prescottprue","download_url":"https://codeload.github.com/prescottprue/react-redux-firebase/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253613507,"owners_count":21936285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","react","react-bindings","redux","redux-bindings","redux-firebase","redux-observable","redux-thunk"],"created_at":"2024-07-31T15:01:14.386Z","updated_at":"2025-05-12T13:14:12.465Z","avatar_url":"https://github.com/prescottprue.png","language":"JavaScript","funding_links":["https://patreon.com/prescottprue","https://opencollective.com/react-redux-firebase"],"categories":["JavaScript","Firebase Tools \u0026 Frameworks","Tools","Bindings","웹"],"sub_categories":["Firebase Courses \u0026 Training","VS Code Extensions for Developer Productivity","Reference","Mesh networks"],"readme":"# react-redux-firebase\n\n[![NPM version][npm-image]][npm-url]\n[![NPM downloads][npm-downloads-image]][npm-url]\n[![Quality][quality-image]][quality-url]\n[![Code Coverage][coverage-image]][coverage-url]\n[![Code Style][code-style-image]][code-style-url]\n[![License][license-image]][license-url]\n[![Build Status][build-status-image]][build-status-url]\n\n[![Gitter][gitter-image]][gitter-url]\n\n\u003e Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React.\n\n## Usage Note\n\nIf you are starting a new project and/or are not required to have your Firebase data loaded into redux, you might want to give [reactfire](https://github.com/FirebaseExtended/reactfire) a try before trying react-redux-firebase. I wrote up [a quick medium article](http://bit.ly/3d2XPsS) explaining a bit about how, why, and showing how to start a new project with these tools.\n\n## [Simple Example](https://codesandbox.io/s/zrr0n5m2zp)\n\n[![Edit Simple Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zrr0n5m2zp)\n\nThe [Material Example](https://github.com/prescottprue/react-redux-firebase/tree/master/examples/complete/material) is deployed to [demo.react-redux-firebase.com](https://demo.react-redux-firebase.com).\n\n## Features\n\n- Out of the box support for authentication (with auto loading user profile from database/firestore)\n- Full Firebase Platform Support Including Real Time Database, Firestore, and Storage\n- Automatic binding/unbinding of listeners through React Hooks (`useFirebaseConnect`, `useFirestoreConnect`) or Higher Order Components (`firebaseConnect` and `firestoreConnect`)\n- [Population capability](http://react-redux-firebase.com/docs/populate) (similar to mongoose's `populate` or SQL's `JOIN`)\n- Support small data ( using `value` ) or large datasets ( using `child_added`, `child_removed`, `child_changed` )\n- Multiple queries types supported including `orderByChild`, `orderByKey`, `orderByValue`, `orderByPriority`, `limitToLast`, `limitToFirst`, `startAt`, `endAt`, `equalTo`\n- Tons of examples of integrations including [`redux-thunk`](https://github.com/gaearon/redux-thunk) and [`redux-observable`](https://redux-observable.js.org/)\n- Server Side Rendering Support\n- [`react-native` support](http://react-redux-firebase.com/docs/integrations/react-native.html) using [native modules](http://react-redux-firebase.com/docs/integrations/react-native.html#native-modules) or [web sdk](http://react-redux-firebase.com/docs/integrations/react-native.html#jsweb)\n\n## Installation\n\n```bash\nnpm install --save react-redux-firebase\n```\n\nThis assumes you are using [npm](https://www.npmjs.com/) as your package manager.\n\nIf you're not, you can access the library on [unpkg](https://unpkg.com/redux-firestore@latest/dist/redux-firestore.min.js), download it, or point your package manager to it. Theres more on this in the [Builds section below](#builds).\n\n### Older Versions\n\nInterested in support for versions of [`react-redux`](https://github.com/reduxjs/react-redux) before v6 or the [new react context API](https://reactjs.org/docs/context.html)? Checkout [the `v2.*.*` versions](https://github.com/prescottprue/react-redux-firebase/tree/v2) (installed through `npm i --save react-redux-firebase^@2.5.0`).\n\n## Use\n\nInclude `firebaseReducer` (reducer) while creating your redux store then pass dispatch and your firebase instance to `ReactReduxFirebaseProvider` (context provider):\n\n```javascript\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { Provider } from 'react-redux'\nimport firebase from 'firebase/app'\nimport 'firebase/database'\nimport 'firebase/auth'\n// import 'firebase/firestore' // \u003c- needed if using firestore\n// import 'firebase/functions' // \u003c- needed if using httpsCallable\nimport { createStore, combineReducers, compose } from 'redux'\nimport {\n  ReactReduxFirebaseProvider,\n  firebaseReducer\n} from 'react-redux-firebase'\n// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // \u003c- needed if using firestore\n\nconst fbConfig = {}\n\n// react-redux-firebase config\nconst rrfConfig = {\n  userProfile: 'users'\n  // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB\n}\n\n// Initialize firebase instance\nfirebase.initializeApp(fbConfig)\n\n// Initialize other services on firebase instance\n// firebase.firestore() // \u003c- needed if using firestore\n// firebase.functions() // \u003c- needed if using httpsCallable\n\n// Add firebase to reducers\nconst rootReducer = combineReducers({\n  firebase: firebaseReducer\n  // firestore: firestoreReducer // \u003c- needed if using firestore\n})\n\n// Create store with reducers and initial state\nconst initialState = {}\nconst store = createStore(rootReducer, initialState)\n\nconst rrfProps = {\n  firebase,\n  config: rrfConfig,\n  dispatch: store.dispatch\n  // createFirestoreInstance // \u003c- needed if using firestore\n}\n\n// Setup react-redux so that connect HOC can be used\nfunction App() {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cReactReduxFirebaseProvider {...rrfProps}\u003e\n        \u003cTodos /\u003e\n      \u003c/ReactReduxFirebaseProvider\u003e\n    \u003c/Provider\u003e\n  )\n}\n\nrender(\u003cApp /\u003e, document.getElementById('root'))\n```\n\nThe Firebase instance can then be grabbed from context within your components (`withFirebase` and `firebaseConnect` Higher Order Components provided to help):\n\n**Add Data**\n\n```jsx\nimport React from 'react'\nimport { useFirebase } from 'react-redux-firebase'\n\nexport default function Todos() {\n  const firebase = useFirebase()\n\n  function addSampleTodo() {\n    const sampleTodo = { text: 'Sample', done: false }\n    return firebase.push('todos', sampleTodo)\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eNew Sample Todo\u003c/h1\u003e\n      \u003cbutton onClick={addSampleTodo}\u003eAdd\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n**Load Data (listeners automatically managed on mount/unmount)**\n\n```jsx\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { useSelector } from 'react-redux'\nimport { useFirebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'\n\nexport default function Todos() {\n  useFirebaseConnect([\n    'todos' // { path: '/todos' } // object notation\n  ])\n\n  const todos = useSelector((state) =\u003e state.firebase.ordered.todos)\n\n  if (!isLoaded(todos)) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e\n  }\n\n  if (isEmpty(todos)) {\n    return \u003cdiv\u003eTodos List Is Empty\u003c/div\u003e\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cul\u003e\n        {Object.keys(todos).map((key, id) =\u003e (\n          \u003cTodoItem key={key} id={id} todo={todos[key]} /\u003e\n        ))}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n**Queries Based On Route Params**\n\nIt is common to make a detail page that loads a single item instead of a whole list of items. A query for a specific `Todos` can be created using\n\n```jsx\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { get } from 'lodash'\nimport { useSelector } from 'react-redux'\nimport { useFirebaseConnect, useFirebase } from 'react-redux-firebase'\nimport { useParams } from 'react-router-dom'\n\nexport default function Todo() {\n  const { todoId } = useParams() // matches todos/:todoId in route\n  const firebase = useFirebase()\n\n  useFirebaseConnect([\n    { path: `todos/${todoId}` } // create todo listener\n    // `todos/${todoId}` // equivalent string notation\n  ])\n\n  const todo = useSelector(\n    ({ firebase: { data } }) =\u003e data.todos \u0026\u0026 data.todos[todoId]\n  )\n\n  function updateTodo() {\n    return firebase.update(`todos/${params.todoId}`, { done: !todo.isDone })\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput\n        name=\"isDone\"\n        type=\"checkbox\"\n        checked={todo.isDone}\n        onChange={updateTodo}\n      /\u003e\n      \u003cspan\u003e{todo.label}\u003c/span\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n**Load Data On Click**\n\n```jsx\nimport React from 'react'\nimport { useSelector } from 'react-redux'\nimport { useFirebase, isLoaded, isEmpty } from 'react-redux-firebase'\n\nfunction TodosList() {\n  const todos = useSelector((state) =\u003e state.firebase.ordered.todos)\n\n  if (!isLoaded(todos)) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e\n  }\n\n  if (isEmpty(todos)) {\n    return \u003cdiv\u003eTodos List Is Empty\u003c/div\u003e\n  }\n\n  return (\n    \u003cul\u003e\n      {Object.keys(todos).map((key, id) =\u003e (\n        \u003cTodoItem key={key} id={id} todo={todos[key]} /\u003e\n      ))}\n    \u003c/ul\u003e\n  )\n}\n\nexport default function Todos() {\n  const firebase = useFirebase()\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eTodos\u003c/h1\u003e\n      \u003cEnhancedTodosList /\u003e\n      \u003cbutton onClick={() =\u003e firebase.watchEvent('value', 'todos')}\u003e\n        Load Todos\n      \u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Firestore\n\nIf you plan to use Firestore, you should checkout [`redux-firestore`][redux-firestore]. It integrates nicely with `react-redux-firebase` and it allows you to run Real Time Database and Firestore along side each other.\n\n`react-redux-firebase` provides the `firestoreConnect` HOC (similar to `firebaseConnect`) for easy setting/unsetting of listeners.\n\nCurrently `react-redux-firebase` still handles auth when using [`redux-firestore`][redux-firestore] - The future plan is to also have auth standalone auth library that will allow the developer to choose which pieces they do/do not want.\n\n## [Docs](http://react-redux-firebase.com)\n\nSee full documentation at [react-redux-firebase.com](http://react-redux-firebase.com)\n\n- [Getting Started](http://react-redux-firebase.com/docs/getting_started)\n- [Auth](http://react-redux-firebase.com/docs/auth)\n- [Queries](http://react-redux-firebase.com/docs/queries)\n- [Firestore](http://react-redux-firebase.com/docs/firestore)\n- [Populate](http://react-redux-firebase.com/docs/populate)\n- [API Reference](http://react-redux-firebase.com/docs/api)\n\n## [Examples](examples)\n\n### [Examples Folder](examples)\n\nExamples folder is broken into two categories [snippets](examples/snippets) and [complete](examples/complete). `/complete` contains full applications that can be run as is, where as `/snippets` contains small amounts of code to highlight specific functionality (dev tools and deps not included).\n\n#### [State Based Query Snippet](examples/snippets/stateBasedQuery)\n\nSnippet showing querying based on data in redux state. One of the more common examples is querying based on the current users auth UID.\n\n#### [Decorators Snippet](examples/snippets/decorators)\n\nSnippet showing how to use decorators to simplify connect functions (redux's `connect` and react-redux-firebase's `firebaseConnect`)\n\n#### [Simple App Example](examples/complete/simple)\n\nA simple example that was created using [create-react-app](https://github.com/facebookincubator/create-react-app)'s. Shows a list of todo items and allows you to add to them.\n\n#### [Material App Example](examples/complete/material)\n\nAn example that user Material UI built on top of the output of [create-react-app](https://github.com/facebookincubator/create-react-app)'s eject command. Shows a list of todo items and allows you to add to them. This is what is deployed to [redux-firebasev3.firebaseapp.com](https://redux-firebasev3.firebaseapp.com/).\n\n## Discussion\n\nJoin us on the [redux-firebase gitter](https://gitter.im/redux-firebase/Lobby).\n\n## Integrations\n\nView docs for recipes on integrations with:\n\n- [redux-firestore](http://react-redux-firebase.com/docs/firestore.html)\n- [redux-thunk](http://react-redux-firebase.com/docs/integrations/thunks.html)\n- [reselect](http://react-redux-firebase.com/docs/integrations/integrations/reselect.html)\n- [redux-observable](http://react-redux-firebase.com/docs/integrations/redux-observable.html)\n- [redux-saga](http://react-redux-firebase.com/docs/integrations/redux-saga.html)\n- [redux-form](http://react-redux-firebase.com/docs/integrations/redux-form.html)\n- [redux-auth-wrapper](http://react-redux-firebase.com/docs/recipes/routing.html#advanced)\n- [redux-persist](http://react-redux-firebase.com/docs/integrations/redux-persist.html)\n- [react-native](http://react-redux-firebase.com/docs/integrations/react-native.html)\n- [react-native-firebase](http://react-redux-firebase.com/docs/integrations/react-native.html#native-modules)\n\n## Starting A Project\n\n### Generator\n\n[generator-react-firebase](https://github.com/prescottprue/generator-react-firebase) is a yeoman generator uses react-redux-firebase when opting to include redux.\n\n### CRA Template\n\n[cra-template-rrf](https://github.com/prescottprue/cra-template-rrf) is a create-react-app template with react-redux-firebase included\n\n### Complete Examples\n\nThe [examples folder](/examples) contains full applications that can be copied/adapted and used as a new project.\n\n## FAQ\n\nPlease visit the [FAQ section of the docs](http://docs.react-redux-firebase.com/history/v2.0.0/docs/FAQ.html)\n\n## Builds\n\nMost commonly people consume Redux Firestore as a [CommonJS module](http://webpack.github.io/docs/commonjs.html). This module is what you get when you import redux in a Webpack, Browserify, or a Node environment.\n\nIf you don't use a module bundler, it's also fine. The redux-firestore npm package includes precompiled production and development [UMD builds](https://github.com/umdjs/umd) in the [dist folder](https://unpkg.com/redux-firestore@latest/dist/). They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a `\u003cscript\u003e` tag on the page. The UMD builds make Redux Firestore available as a `window.ReactReduxFirebase` global variable.\n\nIt can be imported like so:\n\n```html\n\u003cscript src=\"../node_modules/react-redux-firebase/dist/react-redux-firebase.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"../node_modules/redux-firestore/dist/redux-firestore.min.js\"\u003e\u003c/script\u003e\n\u003c!-- or through cdn: \u003cscript src=\"https://unpkg.com/react-redux-firebase@latest/dist/react-redux-firebase.min.js\"\u003e\u003c/script\u003e --\u003e\n\u003c!-- or through cdn: \u003cscript src=\"https://unpkg.com/redux-firestore@latest/dist/redux-firestore.min.js\"\u003e\u003c/script\u003e --\u003e\n\u003cscript\u003e\n  console.log('react redux firebase:', window.ReactReduxFirebase)\n\u003c/script\u003e\n```\n\nNote: In an effort to keep things simple, the wording from this explanation was modeled after [the installation section of the Redux Docs](https://redux.js.org/#installation).\n\n## Contributors\n\nThis project exists thanks to all the people who contribute.\n\n\u003ca href=\"https://github.com/prescottprue/react-redux-firebase/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/react-redux-firebase/contributors.svg?width=890\" /\u003e\u003c/a\u003e\n\n[npm-image]: https://img.shields.io/npm/v/react-redux-firebase.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/react-redux-firebase\n[npm-downloads-image]: https://img.shields.io/npm/dm/react-redux-firebase.svg?style=flat-square\n[quality-image]: http://npm.packagequality.com/shield/react-redux-firebase.svg?style=flat-square\n[quality-url]: https://packagequality.com/#?package=react-redux-firebase\n[backers]: https://opencollective.com/react-redux-firebase/backers/badge.svg?style=flat-square\u0026color=blue\n[become-a-backer]: https://opencollective.com/react-redux-firebase#backer\n[build-status-image]: https://img.shields.io/github/workflow/status/prescottprue/react-redux-firebase/NPM%20Package%20Publish?style=flat-square\n[build-status-url]: https://github.com/prescottprue/react-redux-firebase/actions\n[climate-image]: https://img.shields.io/codeclimate/github/prescottprue/react-redux-firebase.svg?style=flat-square\n[climate-url]: https://codeclimate.com/github/prescottprue/react-redux-firebase\n[coverage-image]: https://img.shields.io/codecov/c/github/prescottprue/react-redux-firebase.svg?style=flat-square\n[coverage-url]: https://codecov.io/gh/prescottprue/react-redux-firebase\n[license-image]: https://img.shields.io/npm/l/react-redux-firebase.svg?style=flat-square\n[license-url]: https://github.com/prescottprue/react-redux-firebase/blob/master/LICENSE\n[code-style-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[code-style-url]: http://standardjs.com/\n[gitter-image]: https://img.shields.io/gitter/room/redux-firebase/gitter.svg?style=flat-square\n[gitter-url]: https://gitter.im/redux-firebase/Lobby\n[redux-firestore]: https://github.com/prescottprue/redux-firestore\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprescottprue%2Freact-redux-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprescottprue%2Freact-redux-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprescottprue%2Freact-redux-firebase/lists"}