Skip to content

Commit

Permalink
Sync Data with Firestore - Got Error version
Browse files Browse the repository at this point in the history
  • Loading branch information
@rodrigoabb
rodrigoabb committed Sep 22, 2019
1 parent 0b22b0a commit c38eef4
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 8 deletions.
5 changes: 0 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-redux-firebase": "^2.4.1",
"react-redux-firestore": "0.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"redux": "^4.0.4",
Expand Down
10 changes: 9 additions & 1 deletion src/components/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Notifications from './Notifications';
import PostList from '../posts/PostList';
import { connect } from 'react-redux'; // Connect the Dashboard component with Redux Store
// Connect is a function that returns a HOC to take in the Dashboard
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';

class Dashboard extends Component {
render() {
Expand All @@ -26,11 +28,17 @@ class Dashboard extends Component {
// Map our State from the Store to the Props of this Component
// Returns an object that represents which properties are attached to the props of this component
const mapStateToProps = (state) => {
console.log('state:', state);
return {
posts: state.post.posts
}

}

export default connect(mapStateToProps)(Dashboard);
export default compose(
connect(mapStateToProps),
firestoreConnect([
{ collection: 'posts'}
])
)(Dashboard);
// After passing mapStateToProps, we can acces to props.posts inside this component
6 changes: 5 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ const store = createStore(rootReducer,
)
);

ReactDOM.render(<Provider store= { store }><App /></Provider>, document.getElementById('root'));
ReactDOM.render(
<Provider store= { store }>
<App />
</Provider>,
document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
Expand Down
2 changes: 2 additions & 0 deletions src/store/reducers/rootReducer.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import authReducer from './authReducer';
import postReducer from './postReducer';
import { combineReducers } from 'redux';
import { firestoreReducer } from 'redux-firestore';

const rootReducer = combineReducers({
auth: authReducer,
post: postReducer,
firestore: firestoreReducer,
})

export default rootReducer;

1 comment on commit c38eef4

@rodrigoabb
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The error I (and a lot of people were) having is: "Error: Context from react-redux not found. If you are using react-redux v6 a v3.. version of react-redux-firebase is required".
To solve this issue, some people may suggest to fix your react-redux version by downgrading it to less than 6 (i.e.: npm i --save react-redux@^5.1.1 ).
I'm not a big fan of downgrading versions or fixed versions for a large number of reasons; it may be a good temporary workaround, but I woulnd't consider it a solution.
I've researched and found a way to sort this out, basing my answer on this one: https://stackoverflow.com/a/53888416/6217195.
The issue you are getting is clear: "If you have react-redux version v6, you need react-redux-firebase v3". So given all of us (I believe) are using react-redux v6+ we need to migrate react-redux-firebase to v3. When we install normaly react-redux-firebase, npm gives us v2.4.1 (at time of writing), so we have to do an "npm i --save react-redux-firebase@next" to get v3.0.0-beta.2 (at time of writing). Then, we have to migrate your index.js; for this you can follow http://docs.react-redux-firebase.com/history/v3.0.0/docs/v3-migration-guide.html. Basically you have to use ReactReduxFirebaseProvider instead of reactReduxFirebase, createFirestoreInstance instead of reduxFirestore:

import { reduxFirestore, getFirestore } from 'redux-firestore';
// import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
import { createFirestoreInstance } from 'redux-firestore'

Your store object will look like:

const store = createStore(rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({ firebaseConfig, getFirestore })),
reduxFirestore(fbConfig),
// reactReduxFirebase(fbConfig),
)
);

Implement rrfConfig and rrfProps objects, and change structure of the element to render

const rrfConfig = { userProfile: 'users' } // react-redux-firebase config

const rrfProps = {
firebase: firebaseConfig,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance // <- needed if using firestore
}

ReactDOM.render(
<Provider store= { store }>
<ReactReduxFirebaseProvider {...rrfProps}>


,
document.getElementById('root'));

A silly reminder, but when you upgrade versions, remember to restar server.

I found a similar fix has been posted on shaun's github iamshaunjp/React-Redux-Firebase-App#11 (comment), but I thought will be worthy to post it here anyway. Hope it helps!

Please sign in to comment.