react-chrome-redux.md

React Chrome Redux

Recipe for integrating with react-chrome-redux

NOTE: This recipe is based communications within issue #157 and is not considered "completed". If you have suggestions, please post an issue or reach out over gitter.

Do not use firebaseConnect in your content/popup scripts. This is because the Store object (the proxyStore in react-chrome-redux), is not "composed" with the reactReduxFirebase function as it is normally.

Use react-redux-firebase in the background script, and communicate with your content/popup using the proxy store and aliases.

Following this pattern allows authenticating the user from the popup:

// in popup, display a login form (component named LoginForm)
// ...
const store = new Store({
  portName: 'example'
});
// ...
  onSubmit(e) {
    e.preventDefault();
    if (this.isValid()) {
      // USER_LOGGING_IN is defined as an alias in react-chrome-redux
      store.dispatch({ type: 'USER_LOGGING_IN', data: {email: "test", password: "test"}});
    }
  }
// ...
// Do not call firebaseConnect here
export default connect(null, { login })(LoginForm);

Then, create your alias in the background script, import react-redux-firebase as well as redux-thunk to wait for Firebase's reply before updating the state (see reply in issue #84 on react-chrome-redux).

// in event (background script)
// ...
import thunk from 'redux-thunk'
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase'
// ...
// Add redux Firebase to compose
const createStoreWithFirebase = compose(
  reactReduxFirebase(firebaseConfig, config)
)(createStore)

const store = createStoreWithFirebase(
  rootReducer,
  {},
  enhancer
)

wrapStore(store, {
  portName: 'example'
});
// ...
const aliases = {
  USER_LOGGING_IN: (payload) => {
    return (dispatch) => {
      getFirebase().login({
        email: payload.data.email,
        password: payload.data.password
      })
      .then(() => {
        dispatch({
          type: constants.USER_LOGGED_IN,
          payload: "ok"
        })
      })
      .catch(() => {
        dispatch({
          type: constants.USER_LOGGED_OUT,
          payload: "logout"
        })
      })
    }
  }
};