Skip to content
Prev Previous commit
Next Next commit
fixed type and added docs
  • Loading branch information
rscotten committed Apr 6, 2020
commit 80082f68dd450b44d0096b8edc7b2b64f0d4bc70
72 changes: 66 additions & 6 deletions docs/getting_started.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
Install peer dependencies: `npm i --save redux react-redux`

## Install

```bash
npm install --save react-redux-firebase
```
Expand All @@ -25,6 +26,62 @@ const rootReducer = combineReducers({
})
```

## Add Reducer using Typescript:

We provide optional `Profile` and `Schema` types for additional type checking.

You can add the `Profile` type if you use the [Profile option](https://react-redux-firebase.com/docs/recipes/profile.html).

You can define a `Schema` that corresponds to your Firebase Redux store for `state.firebase.data` and `state.firebase.ordered`. That could be a map of your Realtime Database collections, or anything else if you use `storeAs` to name custom stores.

```typescript
import { combineReducers } from 'redux'
import { firebaseReducer, FirebaseReducer } from 'react-redux-firebase'

// Optional: If you use the user profile option
interface Profile {
name: string
email: string
}

// If you have a todos collection, you might have this type
interface Todo {
text: string
completed: boolean
}

// Optional: You can define the schema of your Firebase Redux store.
// This will give you type-checking for state.firebase.data.todos and state.firebase.ordered.todos
interface Schema {
todos: Todo
}

// with both reducer types
interface RootState {
firebase: FirebaseReducer.Reducer<Profile, Schema>
}

// with only Profile type
interface RootState {
firebase: FirebaseReducer.Reducer<{Profile>
}

// with only Schema type
interface RootState {
firebase: FirebaseReducer.Reducer<{}, Schema>
}

// without reducer types
interface RootState {
firebase: FirebaseReducer.Reducer
}


const rootReducer = combineReducers<RootState>({
firebase: firebaseReducer
})
```

## Setting Up App With Store

```javascript
Expand All @@ -36,14 +93,17 @@ import 'firebase/auth'
// import 'firebase/firestore' // <- needed if using firestore
// import 'firebase/functions' // <- needed if using httpsCallable
import { createStore, combineReducers, compose } from 'redux'
import { ReactReduxFirebaseProvider, firebaseReducer } from 'react-redux-firebase'
import {
ReactReduxFirebaseProvider,
firebaseReducer
} from 'react-redux-firebase'
// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore

const fbConfig = {}

// react-redux-firebase config
const rrfConfig = {
userProfile: 'users',
userProfile: 'users'
// useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
// enableClaims: true // Get custom claims along with the profile
}
Expand All @@ -57,7 +117,7 @@ firebase.initializeApp(fbConfig)

// Add firebase to reducers
const rootReducer = combineReducers({
firebase: firebaseReducer,
firebase: firebaseReducer
// firestore: firestoreReducer // <- needed if using firestore
})

Expand All @@ -68,7 +128,7 @@ const store = createStore(rootReducer, initialState)
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
dispatch: store.dispatch
// createFirestoreInstance // <- needed if using firestore
}

Expand All @@ -80,8 +140,8 @@ function App() {
<Todos />
</ReactReduxFirebaseProvider>
</Provider>
);
)
}

render(<App/>, document.getElementById('root'));
render(<App />, document.getElementById('root'))
```
8 changes: 4 additions & 4 deletions index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -807,13 +807,13 @@ export function firebaseConnect<ProfileType, TInner = {}>(
* @see https://react-redux-firebase.com/docs/api/reducer.html
*/
export function firebaseReducer<
UserType,
Schema extends Record<string, Record<string | number, string | number>>
UserType extends Record<string, any> = {},
Schema extends Record<string, any> = {}
>(state: any, action: any): FirebaseReducer.Reducer<UserType, Schema>

export function makeFirebaseReducer<
UserType = {},
Schema extends Record<string, Record<string | number, string | number>> = {}
UserType extends Record<string, any> = {},
Schema extends Record<string, any> = {}
>(): (state: any, action: any) => FirebaseReducer.Reducer<UserType, Schema>

/**
Expand Down