这篇 redux在react-native上使用(二)--加入saga 是使用redux-saga
, 可以跟这篇做个对比看下redux-thunk
和redux-saga
使用上的区别.
直接在这项目上修改, 只是把redux-thunk
替换了redux-saga
, 还是达到一样的项目.http://www.jianshu.com/p/aac92e45ed04
首先在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
运行.