redux-saga HellWorld入门 异步计数器(react-redux)

前端之家收集整理的这篇文章主要介绍了redux-saga HellWorld入门 异步计数器(react-redux)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

点击加减按钮,延迟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@)
)

猜你在找的React相关文章