Comments (4)
I solved it so far so:
https://github.com/MrEfrem/react-redux-starter-kit/blob/master/src/entry-points/client.js
...
import { fetchComponentData } from '../utils';
const target = document.getElementById('root');
const store = configureStore(window.__INITIAL_STATE__);
function onRouteEnter(nextState, transition, done) {
fetchComponentData(store.dispatch, nextState.routes.map(b => b.component), nextState.params)
.catch(err => {
if (!__PROD__) {
window.console.log(err);
}
});
done();
}
const node = (
<Root store={store}>
<Router history={createBrowserHistory()}>
{createRoutes(onRouteEnter)}
</Router>
</Root>
);
ReactDOM.render(node, target);
https://github.com/MrEfrem/react-redux-starter-kit/blob/master/src/utils/index.js
export function fetchComponentData (dispatch, components, params) {
const needs = components.reduce( (prev, current) => {
return (current.needs || [])
.concat((current.WrappedComponent ? current.WrappedComponent.needs : []) || [])
.concat(prev);
}, []);
const promises = needs.map(need => dispatch(need(params)));
return Promise.all(promises);
}
https://github.com/MrEfrem/react-redux-starter-kit/blob/master/server/middleware/render-route.js
export default function *renderRouteMiddleware (next) {
const props = yield route(this.request.url);
let store = configureStore();
yield fetchComponentData(store.dispatch, props.components, props.params);
if (config.get('globals').__DEBUG__) {
store = configureStore(store.getState());
}
const markup = ReactDOM.renderToString(
<Root store={store}>
<RoutingContext {...props} />
</Root>
);
this.body = renderIntoTemplate(template, markup, store.getState());
}
https://github.com/MrEfrem/react-redux-starter-kit/blob/master/src/routes/index.js
export default (onEnter) => {
return (
<Route component={CoreLayout}>
<Route path='/' component={HomeView} onEnter={onEnter}/>
<Route path='/test' component={TestView} onEnter={onEnter}/>
</Route>
);
};
https://github.com/MrEfrem/react-redux-starter-kit/blob/master/src/views/HomeView.js
import * as CounterActions from '../reducers/counter';
const mapStateToProps = (state) => ({
counter : state.counter
});
export class HomeView extends React.Component {
static propTypes = {
dispatch : React.PropTypes.func,
counter : React.PropTypes.number
}
constructor () {
super();
}
static needs = [
CounterActions.setCounter
]
from react-redux-starter-kit.
I took as a basis from here:
https://github.com/bananaoomarang/chapters
from react-redux-starter-kit.
Wow awesome, this looks great. I'll take a deeper look a bit later when I get a chance. Thanks!
from react-redux-starter-kit.
Might fork the project to provide a better server environment, but for now the starter kit no longer comes with a server, so closing this for now.
from react-redux-starter-kit.
Related Issues (20)
- what is `@import '~bootstrap/scss/bootstrap.scss';` meaning at `src/styles/main.scss` HOT 2
- browserHistory.push change url path but not really loads the component.
- help wanted: Using javascript generator
- Modularizing code (Fractal setup)
- Migration to another project HOT 1
- Seeking New Maintainers HOT 8
- Reuse action creator in other Fractal route container
- verbose stack Error: [email protected] start: `better-npm-run start` HOT 1
- Can I use this kit for react native project?
- bootstrap data-toggle and data-target
- npm run deploy high cpu usage
- Heroku production deployment
- can not import semantic-ui-css/components/button.css
- Implement server side rendering in updated code.
- Implement server side rendering in updated code.
- Unable to create zip with data Node issue
- I am running on AWS Cloud9 HOT 1
- How to save the parameters passed during the routing jump and to apply this parameter when refreshing the page. HOT 1
- Server/main.js Routes
- Safari Unexpected token const
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 react-redux-starter-kit.