Hey everyone,
I went ahead and updated the tutorial for the current version of react-redux-starter-kit
. You can check it out here
/app1
and /app2
that load its own styles and scripts. (One app may be very large). Is this 2 separate .html files or can I do this elsewhere like a Container or Layout?
import React, { Component, PropTypes } from 'react'
import { browserHistory, Router } from 'react-router'
import { Provider } from 'react-redux'
class AppContainer extends Component {
static propTypes = {
routes : PropTypes.object.isRequired,
store : PropTypes.object.isRequired
}
componentWillMount(){
const { routes, store } = this.props
store.dispatch({type: 'GET_JSON_DATA'})
}
shouldComponentUpdate () {
return true
}
render () {
const { routes, store } = this.props
return (
<Provider store={store}>
<div style={{ height: '100%' }}>
<Router history={browserHistory} children={routes}/>
</div>
</Provider>
)
}
}
export default AppContainer
I ended up doing this. Seems to work:
import React, { Component, PropTypes } from 'react'
import { browserHistory, Router } from 'react-router'
import { Provider } from 'react-redux'
class AppContainer extends Component {
static propTypes = {
routes : PropTypes.object.isRequired,
store : PropTypes.object.isRequired,
loaded : PropTypes.bool.isRequired,
}
constructor() {
super()
this.state = {loaded : false}
}
componentWillMount = (nextState, replace, callback) => {
const { routes, store } = this.props
store.dispatch({type: 'GET_JSON_DATA', cb: this}) <--- include 'this' so I can call isLoaded() from my data-service actions
}
isLoaded(){
console.log('isLoaded')
this.setState({loaded: true})
}
shouldComponentUpdate () {
return true
}
render () {
const { routes, store } = this.props
if(this.state.loaded){
return (
<Provider store={store}>
<div style={{ height: '100%' }}>
<Router history={browserHistory} children={routes}/>
</div>
</Provider>
)
}else{
return <div></div>
}
}
}
export default AppContainer
and in my data-service actions:
....
return axios.all([getPosts(), getPages(),getJobs()])
.then(axios.spread(function (posts, pages, jobs) {
console.log('STORE LOADED')
action.cb.isLoaded() <-- I call the function isLoaded() in AppContainer.js
}));
...
/
and the /cart
/
route sets a home
key to the global store
/cart
route sets a cart
key to the global store
Header
component like you said that tries to read from the cart
key of the state
/
there is no cart
key there just yet
store
there
@protoEvangelion No, this particular kit is for pure client-side development. From the README:
This project does not concern itself with the details of server-side rendering or API structure, since that demands an opinionated structure that makes it difficult to extend the starter kit.