Dispatch redux action before Switch's selector picks a scene?

[boulajp]

Version

Tell us which versions you are using (react native 0.26 is required for v3):

• react-native-router-flux v3.26.5
• react-native v0.26.0

I know that this isn't SO, but I figure this is the best place to ask how to do this.
I need to dispatch an action which triggers a Facebook sign in before deciding which scene to pick by reading the part of the redux state which was modified by that action.

Is this something which is possible using Switch? If so, could you give a short example?

[swhamilton]

@boulajp Did you find your answer? I know this is old, but wanted to give 2 cents here...

I also want to achieve this. I haven't finished implementing it but my approach will probably be:

1. Make the redux Provider be a parent to the component
2. Make a redux action like "CHANGE_FACEBOOK_LOGGEDIN_STATUS" that holds the current state after an request to Facebook.
3. Make a redux action like "CHANGE_LOADING_STATUS" so you know when the ajax request comes back. (Might not be necessary)
4. Only render the Router component if some redux store variable is true:

if isFinishedLoading && isLoggedInFacebook, return (<Router/>...

I found an example of this integrated into a redux-storage project. I believe there might be some parts you can reuse to integrate if you haven't already.

Check this thread for example

import createEngine from 'redux-storage-engine-sessionstorage';
import immutablejs from 'redux-storage-decorator-immutablejs';
import merger from 'redux-storage-merger-immutablejs';

let engine = createEngine('enjoymint');
engine = immutablejs(engine, [
  ['UserRed'],
  ['routing'],
  ['ErrorsRed'],
  ['MenuRed'],
  ['ModalsRed'],
  ['OrdersRed'],
  ['ProfileRed'],
  ['VendorRed']
]);

const finalReducers = storage.reducer(combineReducers(Object.assign({}, reducers, {
  routing: immutableRoutingReducer
})), merger);

const engineMiddleware = storage.createMiddleware(engine, [
  Constants.modals.OPEN_LOGIN_MODAL,
  Constants.modals.TOGGLE_ACCOUNT_DETAILS_MODAL,
  Constants.modals.TOGGLE_CC_MODAL,
  Constants.modals.TOGGLE_BILLING_MODAL,
]);

const routingMiddleware = routerMiddleware(createHistory);

const finalCreateStore = compose(
  applyMiddleware(thunk /*,logger*/, engineMiddleware, routingMiddleware),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);

const store = finalCreateStore(finalReducers);

const load = storage.createLoader(engine);
const createSelectLocationState = () => {
  let prevRoutingState, prevRoutingStateJS;
  return (state) => {
    const routingState = state.routing; // or state.routing
    if (typeof prevRoutingState === 'undefined' || prevRoutingState !== routingState) {
      prevRoutingState = routingState;
      prevRoutingStateJS = routingState.toJS();
    }
    return prevRoutingStateJS;
  };
};
load(store)
  .then(() => {
    /* I put the syncHistoryWithStore() call inside the load resolve promise.  
This way the store is loaded from storage FIRST, before the redux action of LOCATION_CHANGE happens. */
    const history = syncHistoryWithStore(createHistory, store, {
      selectLocationState: createSelectLocationState()
    });
    render(
        <Provider store={store}>
        <Router history={history} render={applyRouterMiddleware(useScroll())}>
        ......
    )
  })
  .catch(() => console.log('Failed to load previous state'));