dlmr/react-router-redial

Simple integration of redial for React Router

react-router-redial's Issues

Cannot find module 'redial'

I just installed it and it makes this error. Maybe it should be installed when we run npm install react-router-redial? I solve my problem by installing it manually.

Error: Cannot find module 'redial'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/Mike/Desktop/react-webpack-startup/node_modules/react-router-redial/lib/triggerHooks.js:11:15)
    at Module._compile (module.js:556:32)
    at Module._extensions..js (module.js:565:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Mike/Desktop/react-webpack-startup/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)

SSR Client still makes initial fetch

Hey There,

Before I implemented this library I had some code that would listen to the browserHistory and only trigger defer on page load, and fetch / defer for every route change thereon.

Does this happen the same way in this library, or am I going back to checking if the data is in the store on the client before dispatching the redux action?

Write tests

Write tests that verify the functionality.

Dynamic routing validation

Hi! Thank you for this great library!

I'm looking for a solution for displaying 404 error page without a redirect. I think It will be great If we can abort a matched route and find next one.

Example:

<Router>
 <Route path="item/:id" component={ItemPage} />
 <Route path="*" component={NotFoundPage} />
</Router>

So, can we modify the library to do this?

Support finer control of which hooks to reload()

We currently get reload() exposed for refreshing the fetched data which is pretty awesome.

In some cases it would be nice to be able to specify a subset of the hook data to refresh. This could look something like this, with an optional parameter hookNames for example.
reload(['fetch']); would only reload data for the fetch hook and leave the others as-is.

Re-render issue

https://github.com/dlmr/react-router-redial/blob/master/src/RedialContainer.js#L28

Every time, container generate new abort and reload functions instances, so can`t skip re-render by using PureComponents.

For some reason, can`t fork a repo, so will paste code here:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import getRoutePath from './util/getRoutePath';

export default class RedialContainer extends Component {
  static displayName = 'RedialContainer';

  static propTypes = {
    children: PropTypes.element.isRequired,
    routerProps: PropTypes.object.isRequired,
  };

  static contextTypes = {
    redialContext: PropTypes.object.isRequired,
  };

  reload = () => {
    this.context.redialContext.reloadComponent(this.props.routerProps.route.component);
  }

  render() {
    const { routerProps, ...props } = this.props;
    const {
      abortLoading,
      loading,
      afterTransitionLoading,
      redialMap,
    } = this.context.redialContext;
    const mapKey = getRoutePath(routerProps.route, routerProps.routes, routerProps.key);
    const redialProps = redialMap.get(mapKey);

    return React.cloneElement(
      this.props.children,
      {
        ...props,
        ...redialProps,
        ...routerProps,
        loading,
        afterTransitionLoading,
        reload: this.reload,
        abort: abortLoading,
      }
    );
  }
}

Don't re-fetch in layouts what are not changes in route transition

First of all, thanks for this library. I'm using it in all my projects. I'm really appreciated.

I'm strictly following the rule "fetch the data in the layout, pages, where they are used". So, the global data is fetching on some main layout of the app, and specific data for the page is fetching on that page.

I see that when I define a fetch hook in global layout, it's re-fetching on every transition between the pages, that are included in this layout.

<Route component={GlobalLayout}> // fetch api/global
  <Route path="/page-a" component={PageA} /> // fetch api/page-a
  <Route path="/page-b" component={PageA} /> // fetch api/page-b
</Router>

According to this example, when I go from pageA to pageB, fetch for api/global is triggered again, but it was fetched previously.

Can you recommend a way to avoid this?

Rename blocking and defer to something easier to understand

I suggest we change some of the terminology used in the API to something easier to understand and reason about.

Old	New
blocking	beforeTransition
defer	afterTransition
parallel	runAfterTransitionImmediately

Thoughts about this change?

Create example

Create an example to show how it can be used.