{"id":20218262,"url":"https://github.com/cannercms/redux-firebase-middleware","last_synced_at":"2026-02-14T10:02:16.797Z","repository":{"id":57350738,"uuid":"97097833","full_name":"CannerCMS/redux-firebase-middleware","owner":"CannerCMS","description":":electric_plug: :fire: Redux firebase middleware for React and React-native","archived":false,"fork":false,"pushed_at":"2018-04-23T10:23:16.000Z","size":182,"stargazers_count":18,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-15T04:40:40.428Z","etag":null,"topics":["firebase","middleware","react","react-native","redux","redux-middleware"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CannerCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-13T08:17:27.000Z","updated_at":"2022-12-31T10:59:09.000Z","dependencies_parsed_at":"2022-09-15T02:02:23.211Z","dependency_job_id":null,"html_url":"https://github.com/CannerCMS/redux-firebase-middleware","commit_stats":null,"previous_names":["canner/redux-firebase-middleware"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fredux-firebase-middleware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fredux-firebase-middleware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fredux-firebase-middleware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fredux-firebase-middleware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CannerCMS","download_url":"https://codeload.github.com/CannerCMS/redux-firebase-middleware/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224580204,"owners_count":17334730,"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","middleware","react","react-native","redux","redux-middleware"],"created_at":"2024-11-14T06:37:47.172Z","updated_at":"2026-02-14T10:02:11.747Z","avatar_url":"https://github.com/CannerCMS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-firebase-middleware [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\u003e Redux middleware for firebase, support native web API or react-native-firebase API.\n\n**NOTE: Only support for Firebase realtime database at this moment, welcome PRs for supporting Firestore**\n\n## Why?\n\nFirebase SDK is hard to achieve strict unidirectional data flow in Redux. If you have a hard time manage your Redux states from Firebase realtime database to your Redux store. This middleware help you seamlessly integrate Firebase with Redux workflow.\n\n## Installation\n\n```sh\n$ npm install --save redux-firebase-middleware\n```\n\n## Usage\n\n### Store\n\nSetting up in your redux store\n\n##### Web\n\n```js\n/** firebase web api **/\nconst {applyMiddleware, createStore, compose} = require('redux');\nconst {firMiddleware} = require('redux-firebase-middleware');\n\nconst config = {\n  apiKey: 'xxxxxxxxxxx',\n  authDomain: 'xxxxxxxxxxx',\n  databaseURL: 'xxxxxxxxxxx',\n  projectId: 'xxxxxxxxxxx',\n  storageBucket: 'xxxxxxxxxxx',\n  messagingSenderId: 'xxxxxxxxxxx',\n};\n\nfirebase.initializeApp(config);\n\nconst finalCreateStore = compose(\n  applyMiddleware(thunk),\n  applyMiddleware(firMiddleware(firebase)) // -----\u003e apply fir middleware in redux store\n)(createStore);\n\n```\n\n##### React-native\n\n```js\n/** react-native-firebase native api **/\nimport RNFirebase from 'react-native-firebase';\n\nconst configOpts = {\n  debug: true,\n  persistence: true,\n};\n\nRNFirebase.initializeApp(configOpts);\n\nconst finalCreateStore = compose(\n  applyMiddleware(thunk),\n  applyMiddleware(firMiddleware(RNFirebase)) // -----\u003e apply fir middleware in redux store\n)(createStore);\n\n.....\n\n```\n\n### Basic operations (Read, and write data)\n\ndispatching a firMiddleware action.\n\n- types **(Array\u003crequest, success, failure\u003e)** : action constants types\n- ref **((firebase.database) =\u003e firebase.database.Reference)**: Instance of firebase reference\n- method: could be one of\n  * `once_value`: https://firebase.google.com/docs/reference/js/firebase.database.Reference#once\n  * `set`: https://firebase.google.com/docs/reference/js/firebase.database.Reference#set\n  * `update`: https://firebase.google.com/docs/reference/js/firebase.database.Reference#update\n  * `remove`: https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove\n\n```js\nconst {CALL_FIR_API} = require('redux-firebase-middleware');\n\nexport const GET_MY_REF = [\n  'GET_MY_REF_REQUEST', // -------\u003e first, must be request type\n  'GET_MY_REF_SUCCESS', // -------\u003e second, must be success type\n  'GET_MY_REF_FAILURE', // -------\u003e third, must be failure type\n];\n\nfunction callAnAction() {\n  return dispatch({[CALL_FIR_API]: {\n    types: GET_MY_REF, // -----\u003e normally this should put in constants, see `constants`(next seciton) for more info\n    ref: (db) =\u003e db.ref('test/path1'), // ----\u003e your firebase reference path\n    method: 'once_value',\n  }});\n}\n```\n\n***Reducers***\n\n```js\nexport default function reducer(state: calcState = initialState, action: FSA) {\n  const {type, payload} = action;\n\n  switch (type) {\n    case 'GET_MY_REF_REQUEST':\n      // update request state\n\n    case 'GET_MY_REF_SUCCESS':\n      // update success state\n      // you can get data from payload.\n\n    case 'GET_MY_REF_FAILURE':\n      // update failure state\n  }\n}\n```\n\n### Listener events (Reading and writing lists)\n\ndispatching a firMiddleware listener actions.\n\n- types **(Array\u003crequest, success, failure\u003e)** : action constants types\n- ref **((firebase.database) =\u003e firebase.database.Reference | firebase.database.Query)**: Instance of firebase reference or firebase query\n- method: could be one of, please reference to: https://firebase.google.com/docs/reference/js/firebase.database.Reference#on\n  * `on_value`\n  * `on_child_added`\n  * `on_child_changed`\n  * `on_child_removed`\n  * `on_child_moved`\n\n```js\nconst {CALL_FIR_API} = require('redux-firebase-middleware');\n\nexport const GET_MY_REF = [\n  'GET_MY_REF_REQUEST', // -------\u003e first, must be request type\n  'GET_MY_REF_SUCCESS', // -------\u003e second, must be success type\n  'GET_MY_REF_FAILURE', // -------\u003e third, must be failure type\n];\n\nfunction callAnAction() {\n  return dispatch({[CALL_FIR_API]: {\n    types: GET_MY_REF, // -----\u003e normally this should put in constants, see `constants`(next seciton) for more info\n    ref: (db) =\u003e db.ref('test/path1'), // ----\u003e your firebase reference path\n    method: 'on_value',\n  }});\n}\n```\n\nTo remove the listener, you'll get `off` method in actions' reducer.\n\n***Reducers***\n\nWhen the state is successful it'll received data as payload, payload's value is slightly different in different methods.\n\nPayload in methods:\n  * `on_value`: dataSnapshot\n  * `on_child_added`: `{childSnapshot, prevChildKey}`\n  * `on_child_changed`: `{childSnapshot, prevChildKey}`\n  * `on_child_removed`: oldChildSnapshot\n  * `on_child_moved`: `{childSnapshot, prevChildKey}`\n\n```js\nexport default function reducer(state: calcState = initialState, action: FSA) {\n  // or if you're using event listeners you'll get additional `off` method to remove the listening event by calling `off()` \n  const {type, payload, off} = action\n\n  switch (type) {\n    case 'GET_MY_REF_REQUEST':\n      // update request state\n\n    case 'GET_MY_REF_SUCCESS':\n      // update success state\n      // you can get data from payload.\n\n    case 'GET_MY_REF_FAILURE':\n      // update failure state\n\n    case 'REMOVE_LISTENER':\n      // call off method to unlisten the event\n      off();\n  }\n}\n```\n\n#### Customized payload\n\n```js\nexport const GET_CALC_CAR_CATEGORY = [\n  'GET_MY_REF_REQUEST', // -------\u003e first, must be request type\n  {\n    type: 'GET_MY_REF_SUCCESS', // ------\u003e second, must be success type\n    payload: (action: FirAPI, state: GetState, data: any) =\u003e {\n      // you can do what ever you want, transforming data or manipulating data .... etc\n      // get firebase data called `data.val()`\n      return data.val();\n    },\n  },\n  'GET_MY_REF_FAILURE', // -------\u003e third, must be failure type\n];\n```\n\n## Credits\n\nInspired by `redux-api-middleware`\n\nhttps://github.com/agraboso/redux-api-middleware\n\n## License\n\nMIT © [chilijung](https://github.com/chilijung)\n\n\n[npm-image]: https://badge.fury.io/js/redux-firebase-middleware.svg\n[npm-url]: https://npmjs.org/package/redux-firebase-middleware\n[travis-image]: https://travis-ci.org/Canner/redux-firebase-middleware.svg?branch=master\n[travis-url]: https://travis-ci.org/Canner/redux-firebase-middleware\n[daviddm-image]: https://david-dm.org/Canner/redux-firebase-middleware.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/Canner/redux-firebase-middleware\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fredux-firebase-middleware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcannercms%2Fredux-firebase-middleware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fredux-firebase-middleware/lists"}