const INITIAL_STATE = {

  value: ""

};

​

const reducer = (state = INITIAL_STATE, action) => {

  switch (action.type) {

    case 'SETVALUE':

      return Object.assign({}, state, { value: action.payload.value });

    default:

      return state;

  }

};

​

const View = ({

  value,

  onValueChange

}) => (

  <div>

    Sync: <input value={value} onChange={(e) => onValueChange(e.target.value)} /><br/>

    Async: <input value={value} onChange={(e) => { const v = e.target.value; setTimeout(() => onValueChange(v), 0)}} />

  </div>

);

​

const mapStateToProps = (state) => {

  return {

    value: state.value

  };

}

​

const mapDispatchToProps = (dispatch) => {

  return {

    onValueChange: (value) => {

      dispatch({

        type: 'SETVALUE',

        payload: {

          value

        } 

      })            

    }

  };

};

​

​

const { connect } = ReactRedux;

const Component = connect(

  mapStateToProps,

  mapDispatchToProps

)(View);

​

const { createStore } = Redux;

const store = createStore(reducer);

​

ReactDOM.render(

  <Component store={store} />,

  document.getElementById('root')

);