Dispatch and reducer in Redux

Creating store and getting state from it

by John Kiran

HTML

<!-- UI -->
<div id="container"></div>

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>

<!-- ReactDOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<!-- Redux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>

<!-- ReactRedux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.min.js"></script>

Babel + JSX

/**Problem is not rending when the state is changed
	 it can be seen in console
   and this problem is solved by subscribe in redux
**/

//initial state
let initialState={msg:"John"};

//creating store with state
let store=Redux.createStore(reducer,initialState);

//making reducer function 
function reducer(state,action) {
  switch(action.type) {
  	case 'ADD_NAME': 
    	console.log(state);
    	return ({msg:state.msg.concat(action.text)});
    default:
    	return state;
  }
}

//getting data from the store
class Hello extends React.Component {
  handle() {
  	store.dispatch({
    	type:"ADD_NAME",
      text:"Kiran",
    });
  }
  render() {
    return (
    	<div> <p>Hello {store.getState().msg}</p>
      <button onClick={this.handle.bind(this)}>click to change name</button>
      </div>
      );
  }
}

ReactDOM.render(
  <Hello/>,
  document.getElementById('container')
);