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

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