Rematch: Support for react-redux-firebase

[kdela]

Hi guys.
Could you find out why react-redux-firebase enhancers don't work with rematch?

https://github.com/prescottprue/react-redux-firebase/blob/master/src/enhancer.js

const store = init({
  models,
  plugins: [select],
  redux: {
    reducers: {
      firebase: firebaseReducer,
      firestore: firestoreReducer
    }
  },
  enhancers: [
    reactReduxFirebase(firebase,
      {
        userProfile: 'users',
        useFirestoreForProfile: true, 
        enableLogging: false
      }
    ),
    reduxFirestore(firebase)
  ]
})

[kdela]

I had to use createStore instead of enhancers

import { init } from '@rematch/core'
import selectorsPlugin from '@rematch/select'
import firebase from 'react-native-firebase'
import { createStore, compose } from 'redux'

import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase'
import { reduxFirestore, firestoreReducer } from 'redux-firestore'

import * as models from './models'

const select = selectorsPlugin();

const createStoreWithFirebase = compose(
  reactReduxFirebase(firebase,
    {
      userProfile: 'users',
      useFirestoreForProfile: true, 
      enableLogging: false
    }
  ),
  reduxFirestore(firebase)
)(createStore)

const store = init({
  models,
  plugins: [select],
  redux: {
    createStore: createStoreWithFirebase,
    reducers: {
      firebase: firebaseReducer,
      firestore: firestoreReducer
    }
  },
})

export default store

import { init } from '@rematch/core'
import selectorsPlugin from '@rematch/select'
import firebase from 'react-native-firebase'

import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase'
import { reduxFirestore, firestoreReducer } from 'redux-firestore'

import * as models from './models'

const select = selectorsPlugin();

console.log(firebase.firestore());

const store = init({
  models,
  plugins: [select],
  redux: {
    reducers: {
      firebase: firebaseReducer,
      firestore: firestoreReducer
    }
  },
  enhancers: [
    reactReduxFirebase(firebase,
      {
        userProfile: 'users',
        useFirestoreForProfile: true, 
        enableLogging: false
      }
    ),
    reduxFirestore(firebase)
  ]
})

export default store

[ShMcK]

Sorry for the late response. Glad you were able to resolve this issue :)

[theunreal]

@kdela / @ShMcK I tried the same and got reactReduxFirebase.reactREduxFirebase is not a function,
I'm also using the persist plugin, any idea?

/* global */
import { init } from '@rematch/core';
import createPersistPlugin, { getPersistor } from '@rematch/persist';
import createLoadingPlugin from '@rematch/loading';
import AsyncStorage from '@react-native-community/async-storage';
import { createStore, compose } from 'redux';
import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase';
import { reduxFirestore, firestoreReducer } from 'redux-firestore';
import firebase from '@react-native-firebase/app';
import * as models from '../models';

// Create plugins
const persistPlugin = createPersistPlugin({
  version: 2,
  storage: AsyncStorage,
  blacklist: [],
});
const loadingPlugin = createLoadingPlugin({});

const createStoreWithFirebase = compose(
  reactReduxFirebase(firebase,
    {
      userProfile: 'users',
      useFirestoreForProfile: true,
      enableLogging: false,
    }),
  reduxFirestore(firebase),
)(createStore);

const configureStore = () => {
  const store = init({
    models,
    redux: {
      middlewares: [],
      createStore: createStoreWithFirebase,
      reducers: {
        firebase: firebaseReducer,
        firestore: firestoreReducer,
      },
    },
    plugins: [persistPlugin, loadingPlugin],
  });

  const persistor = getPersistor();
  const { dispatch } = store;

  return { persistor, store, dispatch };
};

export default configureStore();

[bawahakim]

@theunreal I got it working this way :

import { init } from "@rematch/core";
import firebase from "@react-native-firebase/app";
import { firebaseReducer } from "react-redux-firebase";
import {
  firestoreReducer,
  createFirestoreInstance,
} from "redux-firestore";

import * as models from "./models";

const config = {
  userProfile: "users",
  useFirestoreForProfile: true,
  enableLogging: false,
};

const store = init({
  models,
  redux: {
    reducers: {
      firebase: firebaseReducer,
      firestore: firestoreReducer,
    },
  },
});

export const rrfProps = {
  firebase,
  config,
  dispatch: store.dispatch,
  createFirestoreInstance,
};

export default store;

Then in my App:

```import React from "react";
import { Provider } from "react-redux";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";

import "./i18n";
import store, { rrfProps } from "./store";
import RootNavigator from "./app/nav/RootNavigator";

const App = () => {
return (



);
};

export default App;
```