redux-firebase-middleware
Redux middleware for firebase, support native web API or react-native-firebase API.
NOTE: Only support for Firebase realtime database at this moment, welcome PRs for supporting Firestore
Why?
Firebase 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.
Installation
$ npm install --save redux-firebase-middleware
Usage
Store
Setting up in your redux store
Web
/** firebase web api **/const applyMiddleware createStore compose = ;const firMiddleware = ; const config = apiKey: 'xxxxxxxxxxx' authDomain: 'xxxxxxxxxxx' databaseURL: 'xxxxxxxxxxx' projectId: 'xxxxxxxxxxx' storageBucket: 'xxxxxxxxxxx' messagingSenderId: 'xxxxxxxxxxx'; firebase; const finalCreateStore = createStore;
React-native
/** react-native-firebase native api **/; const configOpts = debug: true persistence: true; RNFirebase; const finalCreateStore = createStore; ...
Basic operations (Read, and write data)
dispatching a firMiddleware action.
- types (Array<request, success, failure>) : action constants types
- ref ((firebase.database) => firebase.database.Reference): Instance of firebase reference
- method: could be one of
once_value
: https://firebase.google.com/docs/reference/js/firebase.database.Reference#onceset
: https://firebase.google.com/docs/reference/js/firebase.database.Reference#setupdate
: https://firebase.google.com/docs/reference/js/firebase.database.Reference#updateremove
: https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove
const CALL_FIR_API = ; const GET_MY_REF = 'GET_MY_REF_REQUEST' // -------> first, must be request type 'GET_MY_REF_SUCCESS' // -------> second, must be success type 'GET_MY_REF_FAILURE' // -------> third, must be failure type; { return ;}
Reducers
{ const type payload = action; }
Listener events (Reading and writing lists)
dispatching a firMiddleware listener actions.
- types (Array<request, success, failure>) : action constants types
- ref ((firebase.database) => firebase.database.Reference | firebase.database.Query): Instance of firebase reference or firebase query
- method: could be one of, please reference to: https://firebase.google.com/docs/reference/js/firebase.database.Reference#on
on_value
on_child_added
on_child_changed
on_child_removed
on_child_moved
const CALL_FIR_API = ; const GET_MY_REF = 'GET_MY_REF_REQUEST' // -------> first, must be request type 'GET_MY_REF_SUCCESS' // -------> second, must be success type 'GET_MY_REF_FAILURE' // -------> third, must be failure type; { return ;}
To remove the listener, you'll get off
method in actions' reducer.
Reducers
When the state is successful it'll received data as payload, payload's value is slightly different in different methods.
Payload in methods:
on_value
: dataSnapshoton_child_added
:{childSnapshot, prevChildKey}
on_child_changed
:{childSnapshot, prevChildKey}
on_child_removed
: oldChildSnapshoton_child_moved
:{childSnapshot, prevChildKey}
{ // or if you're using event listeners you'll get additional `off` method to remove the listening event by calling `off()` const type payload off = action }
Customized payload
const GET_CALC_CAR_CATEGORY = 'GET_MY_REF_REQUEST' // -------> first, must be request type type: 'GET_MY_REF_SUCCESS' // ------> second, must be success type { // you can do what ever you want, transforming data or manipulating data .... etc // get firebase data called `data.val()` return data; } 'GET_MY_REF_FAILURE' // -------> third, must be failure type;
Credits
Inspired by redux-api-middleware
https://github.com/agraboso/redux-api-middleware
License
MIT © chilijung