点击加减按钮,延迟1秒操作加减动作(模拟异步网络请求)
最终调用Action “Done” 将结果展示
import React from 'react'@H_301_6@
import ReactDOM from 'react-dom'@H_301_6@
import {createStore,applyMiddleware} from 'redux'@H_301_6@
import {Provider,connect} from 'react-redux'@H_301_6@
import createSagaMiddleware,{takeEvery} from 'redux-saga'@H_301_6@
import {put,fork} from 'redux-saga/effects'@H_301_6@
function@H_301_6@ reducers@H_301_6@(state=0@H_301_6@,action)@H_301_6@ {@H_301_6@
switch@H_301_6@ (action.type) {
case@H_301_6@ 'Done'@H_301_6@:
return@H_301_6@ state + action.payload;
default@H_301_6@:
return@H_301_6@ state;
}
};
export function@H_301_6@* AddAsync@H_301_6@()@H_301_6@ {@H_301_6@
yield@H_301_6@ new@H_301_6@ Promise(function@H_301_6@ (resolve)@H_301_6@ {@H_301_6@
setTimeout(function@H_301_6@ ()@H_301_6@ {@H_301_6@
resolve()
},1000@H_301_6@)
})
yield@H_301_6@ put({type: 'Done'@H_301_6@,payload: 1@H_301_6@})
}
export function@H_301_6@* SubAsync@H_301_6@()@H_301_6@ {@H_301_6@
yield@H_301_6@ new@H_301_6@ Promise(function@H_301_6@ (resolve)@H_301_6@ {@H_301_6@
setTimeout(function@H_301_6@ ()@H_301_6@ {@H_301_6@
resolve()
},payload: -1@H_301_6@})
}
function@H_301_6@* watchIncrementAsync@H_301_6@()@H_301_6@ {@H_301_6@
yield@H_301_6@* takeEvery('ADD'@H_301_6@,AddAsync)
}
function@H_301_6@* watchDecrementAsync@H_301_6@()@H_301_6@ {@H_301_6@
yield@H_301_6@* takeEvery('SUB'@H_301_6@,SubAsync)
}
var@H_301_6@ sagaMiddleware = createSagaMiddleware();
const@H_301_6@ store = createStore(reducers,applyMiddleware(sagaMiddleware))
function@H_301_6@* root@H_301_6@()@H_301_6@ {@H_301_6@
yield@H_301_6@ [
fork(watchDecrementAsync),fork(watchIncrementAsync)
]
}
sagaMiddleware.run(root)
const@H_301_6@ ResultIn = (props) => <div>结果:{props.value}</div>
const@H_301_6@ Result = connect(
mapStateToPropsResult
)(ResultIn)
var@H_301_6@ AppIn = (props) => <div>
<span onClick={() => {
props.onChangeAdd()
}}>点我加1@H_301_6@</span>
<span onClick={() => {
props.onChangeSub()
}}>点我减1@H_301_6@</span>
<Result/></div>
function@H_301_6@ mapStateToPropsResult@H_301_6@(state)@H_301_6@ {@H_301_6@
return@H_301_6@ {
value: state
}
}
function@H_301_6@ mapStateToProps@H_301_6@(state)@H_301_6@ {@H_301_6@
return@H_301_6@ {
value: state
}
}
function@H_301_6@ mapDispatchToProps@H_301_6@(dispatch)@H_301_6@ {@H_301_6@
return@H_301_6@ {
onChangeAdd: () => {
dispatch({type: 'ADD'@H_301_6@,payload: 1@H_301_6@});
},onChangeSub: () => {
dispatch({type: 'SUB'@H_301_6@,payload: 1@H_301_6@});
}
}
}
const@H_301_6@ App = connect(
mapStateToProps,mapDispatchToProps
)(AppIn)
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,document.getElementById('root'@H_301_6@)
)