react redux redux-saga

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>
参考文档
猜你喜欢
