redux在react-native上使用(三)–加入redux-thunk

Laowen發表於2017-03-19
ReduxReact

這篇 redux在react-native上使用(二)–加入saga 是使用redux-saga, 可以跟這篇做個對比看下redux-thunk和redux-saga使用上的區別.

直接在這專案上修改, 只是把redux-thunk替換了redux-saga, 還是達到一樣的專案.

首先在package.json裡新增redux-thunk庫, 並在目錄下npm install:

"dependencies": {
    ...
    "redux-thunk": "^2.2.0"
},

把sagas.js檔案刪除, 修改下store.js檔案:

import { createStore, applyMiddleware, compose } from `redux`;
import createLogger from `redux-logger`;
import thunk from `redux-thunk`;
import rootReducer from `./reducers`;

const configureStore = preloadedState => {
    return createStore (
        rootReducer,
        preloadedState,
        compose (
            applyMiddleware(thunk, createLogger())
        )
    );
}

const store = configureStore();
export default store;

redux-thunk處理業務邏輯放在action裡, 所以還要修改下actions.js:

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

const startAction = () => ({ type: START });
const stopAction = () => ({ type: STOP });
const resetAction = () => ({ type: RESET });
const runTimeAction = () => ({ type: RUN_TIMER });

var t = -1;

export const start = ()=> {
  return dispatch => {
    dispatch(startAction());
    if(t != -1) return;
    t = setInterval(() => {
      dispatch(runTimeAction());
    }, 1000);
  };
}

export const stop = ()=> {
  return dispatch => {
    dispatch(stopAction());
    if (t != -1) {
      clearInterval(t);
      t = -1;
    }
  }
}

export const reset = ()=> {
  return dispatch => {
    dispatch(resetAction());
    dispatch(stop());
  }
}

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

相關文章