Skip to content

Commit b643911

Browse files
v3.3.1 (#919)
* fix(types): add type for `profileFactory` config option (#917) * fix(types): prevent type error in combineReducers by adding generic type for Schema (#906) - @rscotten Co-authored-by: Richard Scotten <rscotten@users.noreply.github.com>
1 parent cd8bfba commit b643911

File tree

5 files changed

+83
-18
lines changed

5 files changed

+83
-18
lines changed

.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ lib/**
66
_book/**
77
_site/**
88
docs/**
9+
index.d.ts

docs/getting_started.md

Lines changed: 66 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
Install peer dependencies: `npm i --save redux react-redux`
88

99
## Install
10+
1011
```bash
1112
npm install --save react-redux-firebase
1213
```
@@ -25,6 +26,62 @@ const rootReducer = combineReducers({
2526
})
2627
```
2728

29+
## Add Reducer using Typescript:
30+
31+
We provide optional `Profile` and `Schema` types for additional type checking.
32+
33+
You can add the `Profile` type if you use the [Profile option](https://react-redux-firebase.com/docs/recipes/profile.html).
34+
35+
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.
36+
37+
```typescript
38+
import { combineReducers } from 'redux'
39+
import { firebaseReducer, FirebaseReducer } from 'react-redux-firebase'
40+
41+
// Optional: If you use the user profile option
42+
interface Profile {
43+
name: string
44+
email: string
45+
}
46+
47+
// If you have a todos collection, you might have this type
48+
interface Todo {
49+
text: string
50+
completed: boolean
51+
}
52+
53+
// Optional: You can define the schema of your Firebase Redux store.
54+
// This will give you type-checking for state.firebase.data.todos and state.firebase.ordered.todos
55+
interface Schema {
56+
todos: Todo
57+
}
58+
59+
// with both reducer types
60+
interface RootState {
61+
firebase: FirebaseReducer.Reducer<Profile, Schema>
62+
}
63+
64+
// with only Profile type
65+
interface RootState {
66+
firebase: FirebaseReducer.Reducer<Profile>
67+
}
68+
69+
// with only Schema type
70+
interface RootState {
71+
firebase: FirebaseReducer.Reducer<{}, Schema>
72+
}
73+
74+
// without reducer types
75+
interface RootState {
76+
firebase: FirebaseReducer.Reducer
77+
}
78+
79+
80+
const rootReducer = combineReducers<RootState>({
81+
firebase: firebaseReducer
82+
})
83+
```
84+
2885
## Setting Up App With Store
2986

3087
```javascript
@@ -36,14 +93,17 @@ import 'firebase/auth'
3693
// import 'firebase/firestore' // <- needed if using firestore
3794
// import 'firebase/functions' // <- needed if using httpsCallable
3895
import { createStore, combineReducers, compose } from 'redux'
39-
import { ReactReduxFirebaseProvider, firebaseReducer } from 'react-redux-firebase'
96+
import {
97+
ReactReduxFirebaseProvider,
98+
firebaseReducer
99+
} from 'react-redux-firebase'
40100
// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore
41101

42102
const fbConfig = {}
43103

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

58118
// Add firebase to reducers
59119
const rootReducer = combineReducers({
60-
firebase: firebaseReducer,
120+
firebase: firebaseReducer
61121
// firestore: firestoreReducer // <- needed if using firestore
62122
})
63123

@@ -68,7 +128,7 @@ const store = createStore(rootReducer, initialState)
68128
const rrfProps = {
69129
firebase,
70130
config: rrfConfig,
71-
dispatch: store.dispatch,
131+
dispatch: store.dispatch
72132
// createFirestoreInstance // <- needed if using firestore
73133
}
74134

@@ -80,8 +140,8 @@ function App() {
80140
<Todos />
81141
</ReactReduxFirebaseProvider>
82142
</Provider>
83-
);
143+
)
84144
}
85145

86-
render(<App/>, document.getElementById('root'));
146+
render(<App />, document.getElementById('root'))
87147
```

index.d.ts

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -804,17 +804,17 @@ export function firebaseConnect<ProfileType, TInner = {}>(
804804
* @param action.type - Type of Action being called
805805
* @param action.path - Path of action that was dispatched
806806
* @param action.data - Data associated with action
807-
* @see https://react-redux-firebase.com/docs/api/reducer.html
807+
* @see https://react-redux-firebase.com/docs/getting_started.html#add-reducer
808808
*/
809809
export function firebaseReducer<
810-
UserType,
811-
Schema extends Record<string, Record<string | number, string | number>>
812-
>(state: any, action: any): FirebaseReducer.Reducer<UserType, Schema>
810+
ProfileType extends Record<string, any> = {},
811+
Schema extends Record<string, any> = {}
812+
>(state: any, action: any): FirebaseReducer.Reducer<ProfileType, Schema>
813813

814814
export function makeFirebaseReducer<
815-
UserType = {},
816-
Schema extends Record<string, Record<string | number, string | number>> = {}
817-
>(): (state: any, action: any) => FirebaseReducer.Reducer<UserType, Schema>
815+
ProfileType extends Record<string, any> = {},
816+
Schema extends Record<string, any> = {}
817+
>(): (state: any, action: any) => FirebaseReducer.Reducer<ProfileType, Schema>
818818

819819
/**
820820
* React HOC that attaches/detaches Cloud Firestore listeners on mount/unmount
@@ -1008,6 +1008,10 @@ interface ReactReduxFirebaseConfig {
10081008
// Use Firestore for Profile instead of Realtime DB
10091009
useFirestoreForProfile?: boolean
10101010
enableClaims?: boolean
1011+
/**
1012+
* Function for changing how profile is written to database (both RTDB and Firestore).
1013+
*/
1014+
profileFactory?: (userData?: AuthTypes.User, profileData?: any, firebase?: any) => Promise<any> | any
10111015
}
10121016

10131017
/**
@@ -1052,7 +1056,7 @@ export interface ReduxFirestoreConfig {
10521056
}
10531057

10541058
/**
1055-
* Props passed to ReactReduFirebaseProvider
1059+
* Props passed to ReactReduxFirebaseProvider
10561060
* @see https://react-redux-firebase.com/docs/api/ReactReduxFirebaseProvider.html
10571061
*/
10581062
export interface ReduxFirestoreProviderProps {
@@ -1130,8 +1134,8 @@ export interface Data<T extends FirestoreTypes.DocumentData> {
11301134

11311135
export namespace FirebaseReducer {
11321136
export interface Reducer<
1133-
ProfileType = {},
1134-
Schema extends Record<string, Record<string | number, string | number>> = {}
1137+
ProfileType extends Record<string, any> = {},
1138+
Schema extends Record<string, any> = {}
11351139
> {
11361140
auth: AuthState
11371141
profile: Profile<ProfileType>

package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-redux-firebase",
3-
"version": "3.3.0",
3+
"version": "3.3.1",
44
"description": "Redux integration for Firebase. Comes with a Higher Order Components for use with React.",
55
"main": "lib/index.js",
66
"module": "es/index.js",

0 commit comments

Comments
 (0)