integrate redux-react-router

[athibaud]

i tried so myself but to no avail.

has to be a context problem because i get Warning: Failed Context Types: Required context 'store' was not specified in 'Connector'. Check the render method of 'Connector(AppContainer)'.

[erikras]

I am watching that project closely, but I'm waiting for it to gain a tad more stability. This will happen eventually, and I welcome any other attempts by @athibaud or others.

[everblaze]

Using our own actions/reducers we can hang on to the history functions in react router to achieve the desired result, and it will also work when hydrating initial location from the server.. This is the section inside the universalRouter that does majority of the work.

export default function universalRouter(location, history, store) {
  const routes = createRoutes(store);

  store.dispatch(locationDidChange(location));

  if(history && history.addChangeListener){
    store.subscribe(function(){
      let location = store.getState().router.location;
      let {pathname, query, state, navigationType } = location;
      //Only alter if change came from redux state change
      if(history.location != location){
        history.location = new Location(pathname, query, state, navigationType);
        history._notifyChange();
      }
    });
    history.addChangeListener(function(){
      let location = store.getState().router.location;
      let hk = history.location.state && history.location.state.key || null;
      let nk = location.state && location.state.key || null;
      //Only trigger change if history state key is different, location state key is unique
      if(nk != hk){
        store.dispatch(locationDidChange(history.location));
      }
    });
  }

  return new Promise((resolve, reject) => {
    Router.run(routes, location, [createTransitionHook(store)], (error, initialState, transition) => {
      if (error) {
        return reject(error);
      }

      if (transition && transition.redirectInfo) {
        return resolve({
          transition,
          isRedirect: true
        });
      }

      if (history) {  // only on client side
        initialState.history = history;
      }

      const component = (
        <Provider store={store} key="provider"> 
          {() => <Router {...initialState} children={routes}/>}
        </Provider>
      );

      return resolve({
        component,
        isRedirect: false
      });
    });
  });
}

The Router Reducer

import {
  LOCATION_LOAD
} from '../actions/actionTypes';


export default function routerStateReducer(state={}, action = {}) {
    switch (action.type) {
    case LOCATION_LOAD:
      return {
        ...state,
        location: action.router
      };

    default:
      return state;
  }
}

The Action

import {
  LOCATION_LOAD
} from './actionTypes';

export function locationDidChange(location) {
  return {
    type:LOCATION_LOAD,
    router:location
  };
}

This will track all router changes and then allow rollback without tracking as new locations in the redux dev tools. Also does not create history in the browser when rolling back in time with redux.

[quirinpa]

Hey guys i seem to have integrated redux-react-router in my project which is a clone of this :P it has some problems as stated on redux-react-router's docs like complaining about owner-based and parent-based contexts being different and some other stuff but otherwise works fine

[erikras]

@quirinpa and it doesn't suffer from issue #14?

[quirinpa]

@erikras I don't think so. Here's what i did to investigate:

@connect(state => ({router: state.router}))
export default class Home {
    render() {
        console.log(this.props.router);

and it shows the proper query params in the console when the server renders the DefaultRoute

[erikras]

Interesting. I was using 0.2.1, and now it's at 0.4.0. I wonder if that's fixed. I'll check on this again.

Thanks for the update.

[quirinpa]

np :)

[erikras]

@quirinpa No, the problem is that the query parameters aren't present when it's time to fetchData(), at render() is too late.

I just tried with 0.4.0 and it still has the same problem.

[quirinpa]

@erikras oh i see.. Shame. Also i've experimented with code splitting. I'm not sure to what extent but the page works, as long as you hot reload at least once. Yes... If you don't webpack throws an error "cannot read property call of undefined" because webpack tries to call a module that is not yet defined, i've tried at least 2 require polyfills (hacky stuff) and still no luck. Im missing something in regards to that aswell. Also i've read gaeron say somewhere that actions wouldn't be atributed to the component at start. Sorry if i kept your hopes up. :(

[quirinpa]

@erikras but more on the topic of redux-react-router i just did:

export default function universalRouter(location, history, store) {
    if (__SERVER__)
        store.dispatch({type: '@@reduxReactRouter/locationDidChange', payload: location });

and it seems to fix that problem, i think

[erikras]

This task deserves revisiting after React 0.14 comes out. If it has come out already and you are reading this, leave a comment.