|
3 | 3 | ### Table of Contents
|
4 | 4 |
|
5 | 5 | - [createWithFirestore](#createwithfirestore)
|
6 |
| -- [withFirebase](#withfirebase) |
| 6 | +- [withFirestore](#withfirestore) |
7 | 7 |
|
8 | 8 | ## createWithFirestore
|
9 | 9 |
|
10 | 10 | Function that creates a Higher Order Component that
|
11 |
| -automatically listens/unListens to provided firebase paths using |
12 |
| -React's Lifecycle hooks. |
| 11 | +which provides `firebase`, `firestore`, and `dispatch` to React Components. |
| 12 | + |
13 | 13 | **WARNING!!** This is an advanced feature, and should only be used when
|
14 | 14 | needing to access a firebase instance created under a different store key.
|
15 | 15 |
|
16 | 16 | **Parameters**
|
17 | 17 |
|
18 | 18 | - `storeKey` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Name of redux store which contains
|
19 |
| - Firebase state (state.firebase) (optional, default `'store'`) |
| 19 | + Firebase state (`state.firebase`) (optional, default `'store'`) |
20 | 20 |
|
21 | 21 | **Examples**
|
22 | 22 |
|
23 | 23 | _Basic_
|
24 | 24 |
|
25 | 25 | ```javascript
|
26 |
| -// this.props.firebase set on App component as firebase object with helpers |
27 |
| -import { createWithFirebase } from 'react-redux-firebase' |
| 26 | +import { createWithFirestore } from 'react-redux-firebase' |
28 | 27 |
|
29 |
| -// create withFirebase that uses another redux store |
30 |
| -const withFirebase = createWithFirebase('anotherStore') |
| 28 | +// create withFirestore that uses another redux store |
| 29 | +const withFirestore = createWithFirestore('anotherStore') |
31 | 30 |
|
32 |
| -// use the withFirebase to wrap a component |
33 |
| -export default withFirebase(SomeComponent) |
| 31 | +// use the withFirestore to wrap a component |
| 32 | +export default withFirestore(SomeComponent) |
34 | 33 | ```
|
35 | 34 |
|
36 |
| -Returns **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** HOC that accepts a watchArray and wraps a component |
| 35 | +Returns **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Higher Order Component which accepts an array of |
| 36 | +watchers config and wraps a React Component |
37 | 37 |
|
38 |
| -## withFirebase |
| 38 | +## withFirestore |
39 | 39 |
|
40 | 40 | **Extends React.Component**
|
41 | 41 |
|
42 |
| -Higher Order Component that attaches firebase to props. |
43 |
| -Firebase is gathered from store.firebase, which is attached to store by |
44 |
| -the store enhancer (reactReduxFirebase) in ./enhancer. |
| 42 | +Higher Order Component that attaches `firestore`, `firebase` |
| 43 | +and `dispatch` as props to React Components. Firebase instance is gathered |
| 44 | +from `store.firestore`, which is attached to store by the store enhancer |
| 45 | +(`reduxFirestore`) during setup of |
| 46 | +[`redux-firestore`](https://github.com/prescottprue/redux-firestore) |
45 | 47 |
|
46 | 48 | **Examples**
|
47 | 49 |
|
48 | 50 | _Basic_
|
49 | 51 |
|
50 | 52 | ```javascript
|
51 |
| -import { withFirebase } from 'react-redux-firebase' |
| 53 | +import { withFirestore } from 'react-redux-firebase' |
| 54 | + |
| 55 | +const AddTodo = ({ firestore: { add } }) => |
| 56 | + <div> |
| 57 | + <button onClick={() => add('todos', { done: false, text: 'Sample' })}> |
| 58 | + Add Sample Todo |
| 59 | + </button> |
| 60 | + </div> |
| 61 | + |
| 62 | +export default withFirestore(AddTodo) |
| 63 | +``` |
| 64 | + |
| 65 | +_Within HOC Composition_ |
| 66 | + |
| 67 | +```javascript |
| 68 | +import { compose } from 'redux' // can also come from recompose |
| 69 | +import { withHandlers } from 'recompose' |
| 70 | +import { withFirestore } from 'react-redux-firebase' |
52 | 71 |
|
53 |
| -const AddData = ({ firebase: { push } }) => |
| 72 | +const AddTodo = ({ addTodo }) => |
54 | 73 | <div>
|
55 |
| - <button onClick={() => push('todos', { done: false, text: 'Sample' })}> |
| 74 | + <button onClick={addTodo}> |
56 | 75 | Add Sample Todo
|
57 | 76 | </button>
|
58 | 77 | </div>
|
59 | 78 |
|
60 |
| -export default withFirebase(AddData) |
| 79 | +export default compose( |
| 80 | + withFirestore(AddTodo), |
| 81 | + withHandlers({ |
| 82 | + addTodo: props => () => |
| 83 | + props.firestore.add( |
| 84 | + { collection: 'todos' }, |
| 85 | + { done: false, text: 'Sample' } |
| 86 | + ) |
| 87 | + }) |
| 88 | +) |
61 | 89 | ```
|
62 | 90 |
|
63 |
| -Returns **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** That accepts a component to wrap and returns the wrapped component |
| 91 | +Returns **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Which accepts a component to wrap and returns the |
| 92 | +wrapped component |
0 commit comments