redux-saga 範例五:ActionChannel

ActionChannel

by sj82516

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<link rel="stylesheet" href="https://my.stackla.com/media/components/stackla-uikit/dist/uikit.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/redux-saga.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.9.1/polyfill.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

SCSS

.indicator {
  font-size: 36px;
  height: 50px;
  margin-bottom: 10px;
}

JavaScript 1.7

const {Provider, connect} = ReactRedux;
const {createStore, applyMiddleware} = Redux;
const createSagaMiddleware = ReduxSaga.default;
const {takeEvery, takeLatest} = ReduxSaga;
const {take, put, call,fork, actionChannel} = ReduxSaga.effects;

//============
// Reducer
//============
const defaultState = {
    color0: 'yellow',
    color1: 'red',
    color2: 'blue',
    count: 0,
    processed: 0
};
const reducer = (state = defaultState, action) => {
    console.info(action.type);
    switch (action.type) {
        case 'SET_COLOR':  
        	let colorPos = 'color'+action.payload.pos;
            let newState = {...state};
            newState[colorPos] = action.payload.color;
            return newState
        case 'BUTTON_COUNT':
            return {
                ...state,
                count: state.count + 1
            }
        case 'PROCESS_HANDLED':
        	return {
          		...state,
                processed: state.processed + 1
          	}
        default:
            return state;
    }
};

//============
// Actions
//============
function setColor(color, pos) {
    return {
        type: 'SET_COLOR',
        payload: {color, pos}
    };
}

function buttonCount(pos) {
    return {
        type: 'BUTTON_COUNT',
        payload: pos
    }
}

function buttonCancel() {
    return {
        type: 'CANCEL',
        payload: ''
    }
}

function processHandled() {
    return {
        type: 'PROCESS_HANDLED',
        payload: ''
    }
}

//============
// APIs
//============
const colors = ['red', 'blue', 'green', 'orange', 'gray', 'black', 'darkolivegreen', 'purple', 'pink','saddlebrown','darkmagenta']
function getColorApi() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
        		let randomColor = colors[Math.floor(Math.random()*colors.length)];
            resolve(randomColor);
        }, 1500);
    });
}

//================
// Saga (Monitor)
//================

function* rootFlow(){
  yield...