Redux count

by Frank David

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/redux/3.7.2/redux.min.js"></script>
<script src="https://cdn.bootcss.com/react-redux/5.0.6/react-redux.min.js"></script>
<div id="root"></div>

Babel + JSX

const { createStore,combineReducers,bindActionCreators } = Redux
const { Provider,connect } =ReactRedux

//reducer
function myReducer(state=0,action){
    if(action.type == "count/up") {
      return state+1;
    }
    if(action.type == "count/down") {
      return state-1;
    }
    return state;
}
let reducer=combineReducers({count:myReducer})

//store
let store = createStore(reducer);

//component
function Count({dispatch,count,up,down}){
	return (
		<div>
      <p>{count}</p>
      <button onClick={up}>+</button>
      <button onClick={down}>-</button>
    </div>
  );    
}
let Newcount=connect(
 (state)=>({count:state.count}),
 (dispatch)=>({up:()=>dispatch({type:"count/up"}),down:()=>dispatch({type:"count/down"})})
)(Count)

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