With react-router, redux will not work.

[ustccjw]

I'm a flummox's user, as @acdlite suggest, i try to use redux.

I use react-router v1.0-beta2, I found when I use {this.props.children} to use 'component of redux', @connect, then will report error: Failed Context Types: Required context 'redux' was not specified in 'Connector'. Check the render method of 'Connector(DashboardApp)'

It seems react-router disabled the 'redux' context, so what should I do ?

[ooflorent]

Can you attach a gist?

[ustccjw]

@provide(redux)
export default class App extends React.Component {
    constructor(props, context) {
        super(props)
    }

    static childContextTypes = {
        muiTheme: React.PropTypes.object
    }

    getChildContext() {
        return {
            muiTheme: ThemeManager.getCurrentTheme()
        }
    }

    render() {
        return (
            <div className="App">
                <Header />
                {this.props.children}
            </div>
        )
    }
}

@connect(state => ({
    counter: state.dashboard
}))
export default class DashboardApp extends React.Component {
    constructor(props, context) {
        super(props)
    }

    render() {
        const {counter, dispatch} = this.props;
        return (
            <Dashboard counter={counter}
                {...bindActionCreators(DashboardActions, dispatch)} />
        )
    }
}

[ooflorent]

Including the router 😉

[ustccjw]

const rootRoute = {
    path: '/',
    childRoutes: [
        dashboard
    ],
    component: App
}

const dashboard = {
    path: 'dashboard',
    getComponents(cb) {
        require.ensure([], (require) => {
            cb(null, require('../containers/dashboard-app'))
        })
    }
}

[ooflorent]

You must pass the context to super.

[ustccjw]

@ooflorent i update super(props, context), it always report the same error.

[gaearon]

It won't work this way with Router 1.0, until React 0.14 comes out.

Top-level route handler (App) is not an owner of the lower level handlers (DashboardApp) so the context does not propagate. This will be fixed in React 0.14.

In the meantime, you need to wrap <Router> into <Provider> (I don't see where you render <Router> so can't give an exact example.)

[emmenko]

@ustccjw this should help you to understand

emmenko/redux-react-router-async-example@c8e886f

The places to pay attention are:

• how Provider wraps the routes
• how to use @connect and pass actions (or extra props) to the child route

{React.cloneElement(this.props.children, { actions })}

[gaearon]

Let's create a dedicated FAQ in the docs (separate from README) and put RR integration instructions there. Anybody want to do that?

[ustccjw]

@gaearon I can do it, i will try my best.

[ustccjw]

@emmenko thanks, i learn a lot.

[emmenko]

@gaearon I can do a PR later

[emmenko]

@ustccjw glad to help :)

[ustccjw]

@emmenko in this way, can not hot-load store #117

[emmenko]

@ustccjw to be fair, I haven't tried hot reloading in my example. What exactly is not working? Is it working without RR?

[ustccjw]

@emmenko #117 import your stores in App.js (root component), not index.js, so if import stores in index.js, the hot-loading will be failed.

As @gaearon said, this will wait react V0.14, then can import stores in App

import * as stores from './stores'
...
@provide(redux)
export default class App {
}

[gaearon]

To have hot reloading properly working, you'll need to have a root component that returns <Router> wrapped in <Provider> from its render, and imports stores.

If you import stores in index.js, hot reloading them indeed won't work.

[ustccjw]

@gaearon you are right, it works! But react-router will throw error: Uncaught Error: Invariant Violation: <Router history> may not be changed.

[gaearon]

@ustccjw

Thanks for reporting!
You should be able to do something like

class AppContainer extends Component {
  constructor(props) {
    this.history = new BrowserHistory();
    super(props);
  }

  render() {
    return (
      <Provider>{() =>
        <Router history={this.history}>
           ...
        </Router>
      }</Provider>
    );
  }

@mjackson @ryanflorence No plans to support swapping history object on the go?

[ustccjw]

@gaearon Thanks! You are great, I will to learn more from you！

ps. this can not use before super(), this should be

constructor(props) {
    super(props)
    this.history = new BrowserHistory()
}

[gaearon]

Right.

[gaearon]

@emmenko Can you please fix your RR project so hot reloading works taking this comment into account? #136 (comment)

[emmenko]

@gaearon sure, I wanted to make it work first without HR, I'll do that as a second step

[justjacksonn]

Not sure if this is related... and/or I am stuck waiting for React final 0.14.. I am currently using 0.14 rc1. I would like to render a top header, bottom footer and then have my router paths render in between the header and footer areas.. the content area. However, my header is a top menu bar, with <Link...> elements in it.. and every time I use those, I get some sort of infinite loop happening and my entire browser halts.. I have to force quit it.

I assume this has something to do with that the header and footer components are rendered outside of the Provider? Is there some way to make the Link element (or even an element) work to change the content area of my page to the specified routed path/component? I would be fine with header/footer as well as content area inside the Provider tag.. but when I do that, the entire page gets redrawn including header/footer every time I click a link, and I am still stuck with the not working and crashing browser in the header component.

In other words, I am still not quite clear on the proper setup/integration of components with Redux and router. :) Appreciate any help on this.

[gaearon]

Sorry, it is very hard what goes wrong in your particular case but I assure you it is not combining Redux and React Router itself that is the problem, but rather a mistake in using either of them (or something else entirely).

Please consult examples/real-world for React Router integration. If you still have this issue please provide a sample project reproducing it.

[adriennealyzee]

@gaearon Thanks! I tried your code and now I get a different error:

Uncaught Invariant Violation: <Link>s rendered outside of a router context cannot navigate.