Does anyone know how to integrate #react-native-firebase with react-redux-firebase V3 ?
I have installed react-native-firebase following this tutorial https://rnfirebase.io/
"dependencies": {
...
"#react-native-firebase/app": "^12.1.0",
"#react-native-firebase/auth": "^12.1.0",
"#react-native-firebase/firestore": "^12.1.0",
...
},
The git code how to implement react-redux-firebase with react-native seems to be deprecated as it still using the V2
The documentation on the website :
use firebase without importation when configuring the store ?
use import from 'react-redux-firebase' and not '#react-redux-firebase/...' (what is the difference ?)
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import RNFirebase from 'react-native-firebase';
import { createStore, combineReducers, compose } from 'redux'
import { ReactReduxFirebaseProvider, firebaseReducer } from 'react-redux-firebase'
// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore
...
// Initialize firebase instance
firebase.initializeApp(fbConfig)
Does anyone know how to integrate correctly #react-native-firebase with react-redux-firebase V3 ?
Here is the solution,
You will need to import modules like this
and also retrieve an instance of firebase with the app() function.
Here is my configStore file
import {createStore, applyMiddleware, compose} from 'redux';
import rootReducer from '../Redux/Reducers/rootReducer';
import middlewares from '../Redux/Middleware/middleware';
import {createFirestoreInstance} from 'redux-firestore'; // <- needed if using firestore
import {persistReducer, persistStore} from 'redux-persist';
import rrfConfig from '../Redux/Config/reactReduxFirebaseConfig';
import persistConfig from '../Redux/Config/persistConfig';
// Cherry-pick modules of react-native-firebase 6.x
// import '#react-native-firebase/analytics';
// import '#react-native-firebase/crashlytics';
// import '#react-native-firebase/dynamic-links';
// import '#react-native-firebase/perf';
// import '#react-native-firebase/remote-config';
import '#react-native-firebase/auth';
import '#react-native-firebase/firestore';
import '#react-native-firebase/database';
import '#react-native-firebase/storage';
import RNfirebase from '#react-native-firebase/app';
const firebase = RNfirebase.app(); // <-- Retrieve an instance of a FirebaseApp.
// persist reducer in storage
const persistedReducer = persistReducer(persistConfig, rootReducer);
// Create store with reducers
const store = createStore(
persistedReducer,
compose(applyMiddleware(...middlewares)),
);
// react-redux-firebase props
export const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance, // <- needed if using firestore
};
export const persistor = persistStore(store);
export default store;
Related
I am switching my redux-react app to gatsby app , I am facing this issue
and I cannot see the pages anymore.
I've tried to follow these instructions : https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux
yet I get this problem.
createStore.js :
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import createSagaMiddle from 'redux-saga'
import rootSaga from './rootSaga'
import rootReducer from './rootReducer'
import thunk from 'redux-thunk';
const sagaMiddleware = createSagaMiddle()
export const middlewares = [thunk,sagaMiddleware,logger];
export const store = createStore(rootReducer, applyMiddleware(...middlewares))
sagaMiddleware.run(rootSaga)
export default store;
rootReducer.js:
import { combineReducers } from 'redux'
import userReducer from './User/user.reducer'
export default combineReducers({
user: userReducer
})
wrap-with-provider.js:
import * as React from 'react';
import { Provider } from 'react-redux';
import store from './src/state/createStore'
const wrapWithProvider = ({ element }) => (
<Provider store={store}>{element}</Provider>
);
export default wrapWithProvider
and gatsby-ssr.js / gatsby-browser.js:
import wrapWithProvider from "./wrap-with-provider"
export const wrapRootElement = wrapWithProvider
what probably could be the reason.
I removed brackets({}) in import and that fixed my problem. You can try this: import createStore from 'redux'
I'm working on custom packages we use internally in our organization and I'm trying to reduce how many properties I need to pass into the Component I'm creating for the package. One of the components I'm building involve firebase/storage. I want to only pass the result of getStorage() from my app and let the package import ref, uploadBytes, etc. I don't want to have to import them individually and pass them as props. However, whenever I try to import ref in the package and call ref(storage), it returns the FirebaseStorageImpl again, not the StorageReference I expect.
Some code from the compiled package:
import React, { useState, useEffect } from 'react';
import { ref, uploadBytes, deleteObject } from 'firebase/storage';
export const Files = (props) => {
const {
storage
} = props;
console.log(
storage,
ref(storage)
);
}
And my application file:
import { React } from 'react';
import { Files } from 'my-package';
import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';
const App = () => {
const firebaseApp = initializeApp(/* FIREBASE CONFIG */);
const storage = getStorage(firebaseApp);
return (<Files
storage={storage}
/>)
}
I got - Error: Could not find router reducer in state tree, it must be mounted under "router".
I've read all the similar topics. Tryed different variants, but can't find solution. I still don't have enough knowledge to understand the subject. Plz help to fix this error if you know how.
index.js
import { render } from 'react-dom';
import { Provider, ReactReduxContext } from 'react-redux';
import React from 'react';
import { store, history} from './store';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import App from './components/App/App';
render(
<Provider store={store}>
<ConnectedRouter history={history} context={ReactReduxContext}>
<Switch>
<Route path="/" component={App} />
</Switch>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
part of reducers.js
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
export default combineReducers({
router: routerReducer
});
store.js
import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducers/reducers';
import { routerMiddleware } from 'react-router-redux'
import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();
const getMiddleware = () => applyMiddleware(
routerMiddleware(history), promiseMiddleware, localStorageMiddleware, createLogger()
);
export const store = createStore(
reducer,
getMiddleware(),
);
tryed do like this:
in store.js
import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducers/reducers';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';
export const history = createBrowserHistory();
const myRouterMiddleware = routerMiddleware(history);
const getMiddleware = () => applyMiddleware(
myRouterMiddleware, promiseMiddleware, localStorageMiddleware, createLogger()
);
export const store = createStore(
reducer(history),
getMiddleware()
);
in reducers.js
import authorization from './authorization';
import mainstate from './mainstate';
import home from './home';
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router'
export default (history) => combineReducers({
authorization,
mainstate,
home,
router: connectRouter(history)
});
got the same error :(
There are a couple of issues.
createStore(reducer, getMiddleware()) - the enhancer (middleware) needs to be the third argument, the second argument should be the store's initial state. See the docs here.
Try this instead
createStore(reducer, {}, getMiddleware())
The other issue is the version of the history package, with react-router-dom v5 you need to use history v4 (the latest version of which is 4.10.1) - history v5 is only compatible with react-router-dom v6.
In the Codesandbox you posted in your comment below, changing the following in package.json makes it work
"dependencies": {
...
"history": "^5.0.0", -> "history": "4.10.1",
...
}
Lot of solutions out there are pointing at history library version.
The version 5.x of the history package is causing the issues as above.
Could you please try downgrading the history version to 4.10.1 as suggested here
i'm trying to combineReducers
Folder Structure
src
reducers
authReducer.js
lojaReducer.js
index.js
at Index.js i'm importing it
import {lojaReducer, authReducer} from './reducers';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
const authPersistConfig = {
key: 'auth',
storage: storage,
blacklist: ['somethingTemporary']
}
export const Reducers = combineReducers ({
authState: persistReducer(authPersistConfig, authReducer),
lojaState: lojaReducer
});
but i'm getting the error
Module not found: Can't resolve './reducers'
when i do only with lojaReducer it works, how can i do to import multiple reducers?
Since the reducers are in separate files, you need to import them separately.
Something like :
import authReducer from './authReducer'
import lojaReducer from '. /lojaReducer'
Or
import { authReducer} from './authReducer'
import { lojaReducer} from './lojaReducer'
Depending if they are defined as export or export default
I am getting this error
Uncaught TypeError: Providing your root Epic to
createEpicMiddleware(rootEpic) is no longer supported, instead use
epicMiddleware.run(rootEpic)
When simply using
import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import app from './app'
// Bundling Epics
const rootEpic = combineEpics(
)
// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware(rootEpic)
// Define Middleware
const middleware = [
thunk,
promise(),
epicMiddleware
]
// Define Reducers
const reducers = combineReducers({
form: formReducer
})
// Create Store
export default createStore(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(...middleware))
Kindly help to resolve this
First, take a look at this document: Official Redux-Observable Document because we're using the newest version of Redux-Observable, then reviewing its document is quite helpful.
After reviewing the document, let's see a small example project (Counter app):
This is the root.js file which contains my Epics and Reducers after bundling.
// This is a sample reducers and epics for a Counter app.
import { combineEpics } from 'redux-observable';
import { combineReducers } from 'redux';
import counter, {
setCounterEpic,
incrementEpic,
decrementEpic
} from './reducers/counter';
// bundling Epics
export const rootEpic = combineEpics(
setCounterEpic,
incrementEpic,
decrementEpic
);
// bundling Reducers
export const rootReducer = combineReducers({
counter
});
And this is store.js where I define my store before using it.
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic, rootReducer } from './root';
import { composeWithDevTools } from 'redux-devtools-extension';
const epicMiddleware = createEpicMiddleware();
const middlewares = [
epicMiddleware
]
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(middlewares))
);
epicMiddleware.run(rootEpic);
export default store;
In order to successfully implement redux-observable, we have to obey this order:
Creating epicMiddleware using createEpicMiddleware() method
Using the applyMiddleware() method to register the epicMiddleware (the redux-devtools-extension is optional)
Calling the epicMiddleware.run() with the rootEpic we created earlier.
This is the instruction from the Redux-Observable Document
For more information, you could find it here: : Setting Up The Middleware:
Try this
import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import app from './app'
// Bundling Epics
const rootEpic = combineEpics(
)
// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware();
// Define Middleware
const middleware = [
thunk,
promise(),
epicMiddleware
]
// Define Reducers
const reducers = combineReducers({
form: formReducer
})
// Create Store
const store = createStore(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(...middleware))
epicMiddleware.run(rootEpic);
export default store
official documentation createEpicMiddleware.
Well, have you tried:
import { epicMiddleware, combineEpics } from 'redux-observable'
const epicMiddleware = epicMiddleware.run(rootEpic)
?