Thunk demo

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>
<script src="https://cdn.bootcss.com/redux-thunk/2.2.0/redux-thunk.js"></script>
<div id="root"></div>

Babel + JSX

const { createStore,combineReducers,applyMiddleware } = Redux
const { Provider,connect } =ReactRedux
const thunk = ReduxThunk.default

//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},applyMiddleware(thunk))

//store
let store = createStore(reducer,applyMiddleware(thunk));

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

let App =function(){ 
  return <Provider store={store}>
           <Newcount/>
         </Provider>
};

ReactDOM.render(<App/>
,document.getElementById('root'));