redux在react-native上使用(二)--加入redux-saga

在上一篇 redux在react-native上使用(一)--加入redux 已成功把redux添加到項目, 如今再把redux-saga添加進來.

這篇 redux在react-native上使用(三)--加入redux-thunk 是使用redux-thunk, 能夠跟這篇作個對比看下redux-thunk和redux-saga使用上的區別.

這一次作個跑秒器. 點擊開始按鈕就開始跑秒,點擊中止按鈕中止跑秒, 點擊重置按鈕時間就清零. 跑秒狀態下數字爲藍色,中止狀態下爲黑色.

先在package.json裏添加redux-saga庫, 並在目錄下npm install:

"dependencies": {
    ...
    "redux-saga": "^0.11.0"
},

把action名字改得更有意義點, actionsTypes.js:

export const START = 'START';
export const STOP = 'STOP';
export const RESET = 'RESET';
export const RUN_TIMER = 'RUN_TIMER';

actions.js跟着改:

import { START, STOP, RESET, RUN_TIMER } from './actionsTypes';

const start = () => ({ type: START });
const stop = () => ({ type: STOP });
const reset = () => ({ type: RESET });
const runTime = () => ({ type: RUN_TIMER });

export {
    start,
    stop,
    reset,
    runTime
}

reducers.js在action改變後也須要調整:

import { combineReducers } from 'redux';
import { START, STOP, RESET, RUN_TIMER } from './actionsTypes';

// 原始默認state
const defaultState = {
  seconds: 0,
  runStatus: false
}

function timer(state = defaultState, action) {
  switch (action.type) {
    case START:
      return { ...state, runStatus: true };
    case STOP:
      return { ...state, runStatus: false };
    case RESET:
      return { ...state, seconds: 0 };
    case RUN_TIMER:
      return { ...state, seconds: state.seconds + 1 };
    default:
      return state;
  }
}

export default combineReducers({
    timer
});

添加一個sagas.js文件, 處理項目的業務邏輯:

import { takeEvery, delay, END } from 'redux-saga';
import { put, call, take, fork, cancel, cancelled } from 'redux-saga/effects';
import { START, STOP, RESET, RUN_TIMER } from './actionsTypes';
import { stop, runTime } from './actions';

function* watchStart() {
  // 通常用while循環替代 takeEvery
  while (true) {
    // take: 等待 dispatch 匹配某個 action
    yield take(START);
    // 一般fork 和 cancel配合使用，實現非阻塞任務，take是阻塞狀態，也就是實現執行take時候，沒法向下繼續執行，fork是非阻塞的，一樣能夠使用cancel取消一個fork 任務
    var runTimeTask = yield fork(timer);
    yield take(STOP);
    // cancel: 取消一個fork任務
    yield cancel(runTimeTask);
  }
}

function* watchReset() {
  while (true) {
    yield take(RESET)
    yield put(stop());
  }
}

function* timer() {
  try {
    while(true) {
      // call: 有阻塞地調用 saga 或者返回 promise 的函數，只在觸發某個動做
      yield call(delay, 1000);
      // put: 觸發某個action， 做用和dispatch相同
      yield put(runTime());
    }
  } finally {
    if (yield cancelled()) {
      console.log('取消了runTimeTask任務');
    }
  }
}


export default function* rootSaga() {
    yield fork(watchStart);
    yield fork(watchReset)
}

把saga做爲中間件添加進store, store.js以下:

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware, { END } from 'redux-saga';
import createLogger from 'redux-logger';
import rootReducer from './reducers';
import sagas from './sagas';

const configureStore = preloadedState => {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(
        rootReducer,
        preloadedState,
        compose (
            applyMiddleware(sagaMiddleware, createLogger())
        )
    )

    sagaMiddleware.run(sagas);
    store.close = () => store.dispatch(END);
    return store;
}

const store = configureStore();
export default store;

OK, 大功告成, commond+R運行.