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运行.

秒客网

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

相关文章