react redux redux-saga

12 篇文章 0 订阅
  • react是前端view框架
  • redux是前端状态管理器
  • redux-saga是redux的升级版,异步状态管理

saga.js管理异步状态变更,一般是异步请求
reducer.js是redux的东西
main.js整合react+redux+redux-saga

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/babel-polyfill/7.4.3/polyfill.js"></script>
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.js"></script>
<script src="https://cdn.bootcss.com/redux-saga/1.0.0-beta.1/redux-saga.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

    //saga.js
    const { delay, put, takeEvery, all } = ReduxSaga.effects;
    function* incrementAsync(){
        yield delay(1000)
        yield put({type:'INCREMENT'})
        
    }
    function* watchIncrementAsync(){
        yield takeEvery('INCREMENT_ASYNC', incrementAsync)
    }
    function* rootSaga() {//all html需要,工程中可不用
        yield all([
            watchIncrementAsync()
        ])
    }

    //reducer.js
    function reducer(state = 0, action) {
        switch (action.type) {
            case 'INCREMENT':
                return state + 1
            case 'INCREMENT_IF_ODD':
                return (state % 2 !== 0) ? state + 1 : state
            case 'DECREMENT':
                return state - 1
            default:
                return state
        }
    }

    //main.js
    const { createStore, applyMiddleware } = Redux;
    // const {createSagaMiddleware} = ReduxSaga
    // 居然没有createSagaMiddleware这个方法,查看对象后,发现可以使用这个
    const createSagaMiddleware = ReduxSaga.default

    const sagaMiddleware = createSagaMiddleware(rootSaga)
    const store = createStore(
        reducer,
        applyMiddleware(sagaMiddleware)
    )
    sagaMiddleware.run(rootSaga)



    const action = type => store.dispatch({type})
    
    //class声明组件
    class ClassComponent extends React.Component {
        render(){
            return (
                <div>
                    <h3>{this.props.v1}</h3>
                    <div>
                        <button onClick={() => action('INCREMENT')}>
                            INCREMENT
                        </button>
                        {' '}
                        <button onClick={() => action('DECREMENT')}>
                            DECREMENT
                        </button>
                        {' '}
                        <button onClick={() => action('INCREMENT_ASYNC')}>
                            INCREMENT_ASYNC
                        </button>
                        <hr />
                        <div>
                            Clicked: {store.getState()} times
                        </div>
                    </div>
                </div>
            )
        }
    }

    function render(){
        ReactDOM.render(
        <div>
            <ClassComponent v1={'hello redux-saga'} />
        </div>,
        document.getElementById('example')
    );
    }

    render()
    store.subscribe(render)//更新DOM
</script>

</body>
</html>

参考文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值