React-redux-firebase: feat(docs): explanation + examples of using new context system

[dantman]

This library appears to make use of the old experimental context system in React.

Are there any plans to update the library to use the new context system that was released in React 16.3?

[prescottprue]

@dantman Yes! I have been interested in doing this for a long while, but haven't gotten a chance to get to it.

My thoughts so far are:

• I believe the new context API could be used currently by creating your own providers (though this doesn't seem nice and would still contain the old context api)
• removing the old context API would be a breaking change for older versions of React - meaning a major version bump and docs about what works/doesn't
• it would be nice to export a context already containing the decorated firebase instance, but it seems like it may have to be a function that generates the context.
• I am wondering if state selecting contexts are also possible for common state selected values (i.e. auth/profile)
• not exactly sure yet how contexts would work for queries

Maybe the API would look like so, but not sure:

// NOTE: NOT A WORKING EXAMPLE! JUST AN EXAMPLE OF A POSSIBLE FUTURE API
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers, compose } from 'redux'
import { reactReduxFirebase, firebaseReducer, FirebaseContext } from 'react-redux-firebase'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/database'
import Todos from './Todos' // Shown Below

const firebaseConfig = {}

// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users',
  // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}

// Initialize firebase instance
firebase.initializeApp(firebaseConfig)

const createStoreWithFirebase = compose(
  reactReduxFirebase(firebase, rrfConfig), // firebase instance as first argument
  // reduxFirestore(firebase) // <- needed if using firestore
)(createStore)

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

// Create store with reducers and initial state
const initialState = {}
const store = createStoreWithFirebase(rootReducer, initialState)

// Setup react-redux so that connect HOC can be used
const App = () => (
  <Provider store={store}>
    <FirebaseContext.Provider value={store.firebase}>
      <Todos />
    </FirebaseContext.Provider>
  </Provider>
);

render(<App/>, document.getElementById('root'));

Todos

// NOTE: NOT A WORKING EXAMPLE! JUST AN EXAMPLE OF A POSSIBLE FUTURE API
import React from 'react'
import { FirebaseContext } from 'react-redux-firebase'

const Todos = () => (
  <FirebaseContext.Consumer>
    {(firebase) => (
      <div>
        <h1>Todos</h1>
        <button onClick={() => firebase.push('todos', { text: 'Sample' })}>
          Write Data
        </button>
      </div>
    )}
  </FirebaseContext.Consumer>
)

export default Todos

Though it also seems like then maybe even attaching the firebase instance on the store. That being the case, even the enhancer might be unnecessary 🔥 🔥(though dispatch will still have to be passed).

Also, as mentioned it seems like your own context could be created withReact.createContext('firebase') then be passed store.firebase as the value, but then it would be up to you to pass the context object you make around.

As you can see, tons of open questions and thoughts. Maybe it would be good to move this all to a wiki and point to it in the docs. I have found that getting agreement on APIs early on can make things much cleaner.

What are your thoughts? Did you have an API or use case in mind? Always open to suggestions and PRs 😄

[dantman]

What are your thoughts? Did you have an API or use case in mind? Always open to suggestions and PRs 😄

No sorry not right now. I'm starting a project that might be using this library, so I wanted to review the future stability of the project before I started. I'll have to start using the library before I have any API ideas.

[prescottprue]

The use section of the README is an example of using the new context api since the v3.0.0 series uses it.

For those who want to compare changes or view examples, checkout the migration guide and the next branch.