Merge pull request #9249 from Automattic/update/redixify-site-roles

State: Migrate lib/site-roles to Redux state

client/components/data/query-site-roles/README.md

@@ -0,0 +1,38 @@
+Query Site Roles
+================
+
+`<QuerySiteRoles />` is a React component used in managing network requests for site roles.
+
+## Usage
+
+Render the component, passing `siteId`. It does not accept any children, nor does it render any elements to the page. You can use it adjacent to other sibling components which make use of the fetched data made available through the global application state.
+
+```jsx
+import React from 'react';
+import QuerySiteRoles from 'components/data/query-site-roles';
+import MySiteRolesListItem from './list-item';
+
+export default function MySiteRolesList( { siteRoles } ) {
+	return (
+		<div>
+			<QuerySiteRoles siteId={ 12345678 } />
+			{ siteRoles.map( ( role ) => {
+				return (
+					<MySiteRolesListItem role={ role } />
+				);
+			} }
+		</div>
+	);
+}
+```
+
+## Props
+
+### `siteId`
+
+<table>
+	<tr><th>Type</th><td>Number</td></tr>
+	<tr><th>Required</th><td>Yes</td></tr>
+</table>
+
+The site ID for which site roles should be requested.

client/components/data/query-site-roles/index.jsx

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import { isRequestingSiteRoles } from 'state/site-roles/selectors';
+import { requestSiteRoles } from 'state/site-roles/actions';
+
+class QuerySiteRoles extends Component {
+	static propTypes = {
+		siteId: PropTypes.number.isRequired,
+		requestingSiteRoles: PropTypes.bool,
+		requestSiteRoles: PropTypes.func
+	};
+
+	componentWillMount() {
+		this.request( this.props );
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		if ( this.props.siteId !== nextProps.siteId ) {
+			this.request( nextProps );
+		}
+	}
+
+	request( props ) {
+		if ( props.requestingSiteRoles ) {
+			return;
+		}
+
+		props.requestSiteRoles( props.siteId );
+	}
+
+	render() {
+		return null;
+	}
+}
+
+export default connect(
+	( state, ownProps ) => {
+		return {
+			requestingSiteRoles: isRequestingSiteRoles( state, ownProps.siteId )
+		};
+	},
+	{ requestSiteRoles }
+)( QuerySiteRoles );