reactjs - Reactチェックボックスに似たコンポーネントは、APIとして何を公開する必要がありますか?

Question

基本的にチェックボックスのようなコンポーネントを構築していますが、デザインはカスタマイズされています。

私のコンポーネントは

class App extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			checked: false
		};
	}
	toggle(){
		this.setState({
			checked: !this.state.checked
		});
	}
	render() {
		return (
			<svg onClick={this.toggle.bind(this)}>
			<circle cx={50} cy={50} r={30} fill={this.state.checked ? "green" : "red"} />
			</svg>
		)
	}
}
ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Mobx または Redux の状態管理を使用できるように、状態を処理する正しい方法は何でしょうか? 言い換えれば、このコンポーネントを状態管理に依存させず、コンポーネントの外部から状態を変更できるようにするにはどうすればよいでしょうか?