Comments (11)
Thanks for the solution. I'll give it a try and report back.
from prism.
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));
}
from prism.
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.
from prism.
@jmarceli fixed in jmarceli/redux-elm-router#1 ... I will keep this issue opened as we need to document react-router
integration and some best practices.
from prism.
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.
from prism.
+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 :) )
from prism.
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.
from prism.
You know how I feel thanks to this? Great! 😀 Very aesthetically pleasing!
from prism.
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.
from prism.
If you are looking for some plug&play solution, please feel free to use our official boilerplate
from prism.
Closing, nothing actionable here.
from prism.
Related Issues (20)
- Don't Call PropTypes HOT 3
- Sibling components interaction best practice HOT 6
- Performance HOT 2
- Request to join cdnjs HOT 1
- Build a umd package for Browser usage
- Reduce bundle size by using rxjs modularity HOT 1
- Mount order and saga registering HOT 8
- Get currentUser state in component Updater HOT 3
- Sagas not getting unmounted HOT 2
- Version 4.x.x HOT 7
- redux-saga update HOT 2
- Documentation links 404 HOT 5
- Where is documentation for v3? HOT 2
- Props 'selector' and 'wrapper' get passed down to enhanced component HOT 3
- prism-redux/escapeRegexp.js is missing a character in the regex
- Questions about using side-effect libraries with prism
- How to wrap/unwrap dynamic components? HOT 2
- Provide a wrapper compatible with the library-provided unwrapper
- EnhanceComponent doesn't work with thunk middleware
- Dynamic list of stateful components HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from prism.