import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setDiff } from '../actions';

class Option extends Component {
	constructor(props) {
		super(props);
		this.onChange = this.onChange.bind(this);
	}
	
	onChange(event) {
		this.props.onUpdateDiff(parseInt(event.target.value));
	}
	
	render() {
		return (
			<div>
				<input value={this.props.diff} onChange={this.onChange} />
			</div>);
	}
}

let mapStateToProps = (state) => {
	return {
		diff: state.counter.diff
	}
}

let mapDispatchToProps = (dispatch) => {
	return {
		onUpdateDiff: (value) => dispatch(setDiff(value))
	};
}

Option = connect(mapStateToProps, mapDispatchToProps)(Option);
export default Option;

import { createStore } from "redux";
import { Provider } from "react-redux";
const store = createStore(counterApp);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

export const INCREMENT = 'INCREMENT'; 
export const DECREMENT = 'DECREMENT'; 
export const SET_DIFF = 'SET_DIFF'; 

export function increment() { 
	return { 
		type: INCREMENT 
	}; 
} 

export function decrement() { 
	return { 
		type: DECREMENT 
	}; 
} 

export function setDiff(value) { 
	return {
		type: SET_DIFF, 
		diff: value
	};
}

import { INCREMENT, DECREMENT, SET_DIFF } from "../actions";
import { combineReducers } from "redux";

const counterInitialState = { value: 0, diff: 1 };

const counter = (state = counterInitialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return Object.assign({}, state, { value: state.value + state.diff });
    case DECREMENT:
      return Object.assign({}, state, { value: state.value - state.diff });
    case SET_DIFF:
      return Object.assign({}, state, { diff: action.diff });
    default:
      return state;
  }
};

const counterApp = combineReducers({ counter });
export default counterApp;

onChange(event) { 
	this.props.store.dispatch(setDiff(parseInt(event.target.value))); 
}

onIncrement(event) {
	this.props.store.dispatch(increment())
}

onDecrement(event) {
	this.props.store.dispatch(decrement())
}

const store = createStore(counterApp);

const render = () => {
  ReactDOM.render(<App store={store} />, document.getElementById("root"));
};

store.subscribe(render);
render();

render() {
	return (
		<div>
			<input value={this.props.store.getState().counter.diff} onChange={this.onChange} />
		</div>
	);
}

class App extends Component {
	render() {
		return (
			<div>
				<Counter store={this.props.store} />
				<Option store={this.props.store} />
				<Button store={this.props.store} /> </div>
		);
	}
}