Closed jmarceli closed 8 years ago
Hello, I am really glad that you like it!
So here's the idea:
Your root view would look like this:
import { view } from 'redux-elm';
import buildRouting from './buildRouting';
export default view(({ history }) => buildRouting(history));
And the implementation of buildRouting
is pretty straightforward:
import React from 'react';
import { connect } from 'react-redux';
import { forwardTo } from 'redux-elm';
import { Router, Route, IndexRoute } from 'react-router';
import Template from '../../template/template';
import CounterView from '../counter/counterView';
import AsyncView from '../async/asyncView';
const connectView = (View, modelKey, ...nesting) =>
connect(appState => ({ model: appState.root[modelKey] }))(
props => <View {...props} dispatch={forwardTo(props.dispatch, ...nesting)} />);
const ConnectedCounterView = connectView(CounterView, 'counter', 'Counter');
const ConnectedAsyncView = connectView(AsyncView, 'async', 'Async');
export default history => (
<Router history={history}>
<Route path="/" component={Template}>
<IndexRoute component={ConnectedCounterView} />
<Route path="counter" component={ConnectedCounterView} />
<Route path="async" component={ConnectedAsyncView} />
</Route>
</Router>
);
don't forget to modify boilerplate.js:
import React from 'react';
import { render } from 'react-dom';
import { createStore, compose } from 'redux';
import { Provider, connect } from 'react-redux';
import reduxElm from 'redux-elm';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
export default (containerDomId, View, updater) => {
const storeFactory = compose(
reduxElm,
window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
const store = storeFactory(updater);
const history = syncHistoryWithStore(browserHistory, store);
const ConnectedView = connect(appState => ({
model: appState
}))(View);
render((
<Provider store={store}>
<ConnectedView history={history} />
</Provider>
), document.getElementById(containerDomId));
}
Thanks for the solution. I'll give it a try and report back.
Well, I didn't manage to make it work. Here is the result: https://github.com/jmarceli/redux-elm-router.
It doesn't change current route and every counter update ends with the warning:
browser.js:49Warning: [react-router] You cannot change <Router routes>; it will be ignored
Probably I misunderstood some of your ideas. If you'll be so kind and take a look I would be grateful.
@jmarceli fixed in https://github.com/jmarceli/redux-elm-router/pull/1 ... I will keep this issue opened as we need to document react-router
integration and some best practices.
Thanks for your help. Now everything works as expected. I've added a couple of commits to my repo to make the code more readable (I hope) and some comments which explains what's going on.
+1 for an example about react-router
integration with redux-elm
I'm wondering about the comment here: https://github.com/jmarceli/redux-elm-router/blob/master/src/template.js#L7-L8 and how elmish this is (I'm fairly new to this though so I might be wrong :) )
Thanks for the feedback. I've updated template.js
according to the Elm Architecture (see: https://github.com/jmarceli/redux-elm-router/blob/master/src/template/view.js). Please take a look and tell me how you feel about it.
You know how I feel thanks to this? Great! 😀 Very aesthetically pleasing!
I've updated my example code by adding custom routerMiddleware
which allows for push('/someroute')
usage from any elm component in the app. It is especially useful if you are using saga for handling form submissions and you want to redirect user after that.
If you are looking for some plug&play solution, please feel free to use our official boilerplate
Closing, nothing actionable here.
For anyone looking for react-router integration here is the example:
https://github.com/jmarceli/redux-elm-router
---- ORIGINAL question
Hi, I really like this redux implementation it is really clean and well documented. Anyway I have a problem with routing. How should I refactor the code to get
react-router-redux
support?I come up with the following solution: src/boilerplate.js
src/home/updater.js (it is my main application parte executed from
main.js
)But it doesn't work. Well it works (actions are dispatched), but my app is always on the first page
home
. I would appreciate any ideas on how to make routing work.