Skip to content

Instantly share code, notes, and snippets.

@neilcampbell
Last active October 10, 2015 06:13
Show Gist options
  • Save neilcampbell/902449a48f9cb5b31a1e to your computer and use it in GitHub Desktop.
Save neilcampbell/902449a48f9cb5b31a1e to your computer and use it in GitHub Desktop.
React/Redux/ES6
import React from 'react/addons';
import { connect } from 'react-redux';
import { subscribeToSomethings } from '../actions/somethingsActions';
export default class MySmartComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
somethingsSubscription: null
};
}
componentWillMount() {
let somethingsSubscription = this.props.dispatch(subscribeToSomethings());
this.setState({ somethingsSubscription });
}
componentWillUnmount() {
if(this.state.somethingsSubscription &&
this.state.somethingsSubscription.dispose) {
this.state.somethingsSubscription.dispose();
}
}
`
render() {
return (<AnotherComponent somethings={this.props.somethings} />);
}
}
//Select only the state I care about from the store
function stateSelector(state) {
return {
somethings: state.somethings
};
}
export const ConnectedMySmartComponent = connect(stateSelector)(MySmartComponent);
import streamsContainer from '../streams'; //TODO: Still trying to formalise something nicer here
export const SOMETHINGS_RECIEVED = 'SOMETHINGS_RECIEVED';
export const SOMETHINGS_RECIEVE_FAILED = 'SOMETHINGS_RECIEVE_FAILED';
export const SOMETHINGS_SUBSCRIBED = 'SOMETHINGS_SUBSCRIBED';
export const SOMETHINGS_SUBSCRIBE_FAILED = 'SOMETHINGS_SUBSCRIBE_FAILED';
function somethingsRecieved(somethings) {
return {
type: SOMETHINGS_RECIEVED,
payload: { somethings }
};
}
function somethingsRecieveFailed(exception) {
return {
type: SOMETHINGS_RECIEVE_FAILED,
payload: exception,
error: true
};
}
function somethingsSubscribed(subscription) {
return {
type: SOMETHINGS_SUBSCRIBED,
payload: { subscription }
};
}
function somethingsSubscribeFailed(exception) {
return {
type: SOMETHINGS_SUBSCRIBE_FAILED,
payload: exception,
error: true
};
}
export function subscribeToSomethings() {
return function _subscribeToSomethings(dispatch, getState, streams = streamsContainer) { //TODO: Create a streams injection middleware
try {
let subscription = streams.somethingsStream.subscribe(
somethings => dispatch(somethingsRecieved(somethings)),
ex => dispatch(somethingsRecieveFailed(ex)),
() => {}
);
return dispatch(somethingsSubscribed(subscription)).payload.subscription;
} catch (ex) {
dispatch(somethingsSubscribeFailed(ex));
return undefined;
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment