thunk-saga
背景: 刚开始学习前端以及react.之前粗略的对比了下thunk以及saga.发现thunk与saga总体差不多,对我来说都够用,再考虑到学习成本,我还是选择使用了thunk. 但是使用thunk重构几个模块之后发现登录流程很麻烦,需要promise或者async/wait的支持才可以很好的完成登录流程,我的解决办法是在回调里调用(尝试过async/promis不可以,里面的步骤比较繁琐),这个很low逼,我也很不喜欢,以后维护起来会很吃力,所以决定切换到saga.
两者的对比,先从简单的获取数据说起(获取用户列表)
一: 大体相同的部分
...
import * as actions from '../actions/users
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux'
class User extends React.Component {
...
}
const mapStateToProps = (state, ownProps) => ({
users: state.users,
})
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(actions, dispatch)
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(User)
上面这部分就是大致相同的.
二: 不同点
- 配置不同
saga的store配置如下
// ./configureStore.js
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';
const sagaMiddleware = createSagaMiddleware()
// let store = createStore(combineReducers);
export default function configureStore() {
const store = createStore(
rootReducer,
applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga)
return store;
}
可以发现初始化的时候就去运行 saga.
我们来看看saga:
// ./sagas/index.js
import {watchFetchUsers} from './users';
function* rootSaga() {
/*The saga is waiting for a action called LOAD_DASHBOARD to be activated */
yield all(
[
fork(watchFetchUsers),
]
)
}
export default rootSaga
我们来看看watchFetchUsers
import {put, takeEvery, call} from 'redux-saga/effects';
import {queryUsers} from './Api';
import * as actions from '../../actions/users';
import {GET_USER_REQUEST} from '../../constants/users/ActionTypes'
export function * watchFetchUsers() {
yield takeEvery(GET_USER_REQUEST, getUsers)
}
export function* getUsers() {
const data = yield call(queryUsers);
yield put(actions.queryUsersSuccess(data.users));
}
// ./Api
import MyFetch from '../../tools/MyFetch'
export const queryUsers = () => {
return MyFetch.get(`v1/users`);
};
可以发现,saga里有 watchFetchUsers和getUsers.我们在rootSagas里是有fork这个watchFetchUsers的.然后通过watchFetchUsers去触发getUsers. 那么如何触发watchFetchUsers呢?我们需要改变下用户的actions.
// actions/users/index.js
import * as types from constants/users/ActionTypes
export const getUserRequest = () => ({type: types.GET_USER_REQUEST})
现在我们有了这个action, 那么我们就可以去使用他发起一个请求.
// components/User.js
class User extends React.Component {
...
componentDidMount() {
this.props.actions.getUserRequest()
}
}
这样子他就会去执行getUserRequest方法,这样就会被watchFetchUsers给监听到,再去通过type(GET_USER_REQUEST)去匹配getUsers方法.
再getUsers方法最后有 yield put(actions.queryUsersSuccess(data.users));这个put就是相当于thunk的dispatch.
写了一天之后给我的感觉就是: thunk需要你自己去匹配需要的动作,saga是写一个监听方法,他自己去分发对应的action.
或许我这样的写法是不规范的,但是我还是决定先切换到saga
下面是一个关于登录发送短信倒计时的对比.
- thunk
export const sendAuthCodeToPhone = (self, phone) => {
return dispatch => {
dispatch(sendCodeStart())
MyFetch.post(`v1/verification_code`, {phone: phone}).then(data => {
if(data.status === 200){
dispatch(snedCodeSuccess())
self.timer = setInterval(() => {
dispatch(tick(self))
}, 1000);
}else {
dispatch(snedCodeFail())
message.error(data.message)
}
})
}
}
const tick = (self) => {
return dispatch => {
let counter = self.props.login.count
if (counter < 1) {
clearInterval(self.timer)
dispatch(timerStart())
} else {
dispatch(timerStop(counter))
}
}
}
- saga
import { eventChannel, END } from 'redux-saga'
import {put, takeEvery, call, take, fork, takeLatest} from 'redux-saga/effects';
export function* sendCode(action) {
let {self} = action
const result = yield call(sendCodeToPhone, action)
if(result.status === 200){
yield put(actions.snedCodeSuccess())
const timeChannel = yield call(tick, self)
try {
while (true) {
// take(END) will cause the saga to terminate by jumping to the finally block
let seconds = yield take(timeChannel)
yield put(self.props.actions.timerStop(seconds))
}
} finally {
yield put(self.props.actions.timerStart())
}
}else {
yield put(actions.snedCodeFail())
message.error(result.message)
}
}
function tick(self) {
return eventChannel(emitter => {
const timer = setInterval( function() {
let counter = self.props.login.count
if (counter < 1) {
emitter(END)
clearInterval(timer)
} else {
emitter(counter)
}
}, 1000);
return () => {
clearInterval(timer)
}
}
)
}
