Skip to content

Instantly share code, notes, and snippets.

@liammclennan
Last active April 13, 2016 01:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save liammclennan/e61fe313a92eaf88df7a298e5e9ab219 to your computer and use it in GitHub Desktop.
Save liammclennan/e61fe313a92eaf88df7a298e5e9ab219 to your computer and use it in GitHub Desktop.
Pure React components with Redux and react-router
store.subscribe(() => {
ReactDOM.render(
<Router history={browserHistory}>
// Note the use of onEnter event
<Route path="/chunk/:id" onEnter={handleEnterChunk} component={attachState(ChunkPage.Chunk,'chunk')}/>
</Router>)
});
// read route params (state.params) and do required state changes
function handleEnterChunk(state,replace,callback) {
let chunkP = blackstar.get({ids:[state.params['id']]});
let tagsP = blackstar.getAllTags();
Promise.all([chunkP,tagsP]).then(([chunks,tags]) => {
const action = {
type: ChunkPage.actionTypes.LOADED_CHUNK,
chunk: _.find(chunks, (item:any) => item.id.toString() === state.params['id']),
allTags: tags
};
store.dispatch(action);
callback();
});
}
// populate prop.data on `Component` with the state for that component
var attachState = function(Component, reducerName) {
return React.createClass({
render: function() {
return React.createElement(Component, _.extend({
data: store.getState()[reducerName],
dispatch: enhancedDispatcher
}, this.props));
}
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment