actioncreator.js

//Input and Reducer
import { createStore } from "redux";
import { connect, Provider } from "react-redux";
import React from "react";
import { render } from "react-dom";

//constant
const UPDATEPROFILE = "UPDATEPROFILE";

const initalState = {
  id: 1,
  name: "defaultName"
};
const ProfileReducer = (state = initalState, action) => {
  switch (action.type) {
    case UPDATEPROFILE:
      return Object.assign({}, state, { name: action.name });
    default:
      return state;
  }
};

const appStore = createStore(ProfileReducer);

/* const action = {
  type: UPDATEPROFILE,
  name: "Ram"
};
 */
/* function ProfileActionCreator(name) {
  return {
    type: UPDATEPROFILE,
    name: name
  };
} */
const ProfileActionCreator = name => ({ type: UPDATEPROFILE, name });
/* appStore.subscribe(function() {
  console.log(appStore.getState());
}); */

//appStore.dispatch(action);
//appStore.dispatch(ProfileActionCreator("Robert"));

class Profile extends React.Component {
  onUpdate = e => {
    const value = e.target.value;
    console.log(value);
    this.props.dispatch(ProfileActionCreator(value));
  };
  render() {
    return (
      <div>
        <h1>Update Profile</h1>
        <p>Got Name From Reducer </p>
        <p>{this.props.name}</p>
        <input onInput={this.onUpdate} />
      </div>
    );
  }
}
const mapStateToProps = state => ({ name: state.name });

const ProfileContainer = connect(mapStateToProps)(Profile);

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