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

原文地址：https://www.jb51.cc/react/304554.html