Redux-Saga学习心得

Posted 2020-09-26 HandsomeHan

# Redux Saga

## 简述
- Reducers负责处理action的state更新；
- Sagas负责协调那些复杂或异步的操作。

## 安装

npm install --save redux-saga

```
// ...
import { createStore, applyMiddleware } from ‘redux‘
import createSagaMiddleware from ‘redux-saga‘

// ...
import { rootSaga } from ‘./sagas‘

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(rootSaga)

const action = type => store.dispatch({type})

```
## 辅助函数

用来在一些特定的action被发起到Store时派生任务。

1. takeEvery
2. put: 用于创建dispatch Effect
3. take: 通过全面控制action观察进程来构建复杂的控制流
4. fork: 无阻塞调用

---

```
yield fetch(url) => yield call(fetch, url)

```
### take
等待dispatch匹配某个action
```
while(true) {
yield take(‘Click_Action‘)
yield fork(clickButtonSaga)
}
```

### put
触发某个action,作用和dispatch相同
```
yield put({type: ‘CLICK‘})
```

```
//具体例子
import { call, put } from ‘redux-saga/effects‘

export function* fetchData(action) {
try {
const data = yield call(fetch, url)
yield put({type: ‘FETCH_SUCCESS‘, data})
} catch (error) {
yield put({type: ‘FETCH_FAILED‘, error})
}
}
```
### call
有阻塞的调用saga或者返回promise的函数，只在触发某个动作

### takeEvery
循环监听某个触发动作，通常会使用while循环替代
```
import {takeEvery} from ‘redux-saga/effects‘

function* watchFetchData() {
yield takeEvery(‘FETCH_REQUESTED‘, fetchData)
}
```
### takeLatest
对于触发多个action的时候，只执行最后一个，其他的会自动取消
```
import { takeLatest } from ‘redux-saga/effects‘

function* watchFetchData() {
yield takeLatest(‘FETCH_REQUESTED‘, fetchData)
}
```
### fork和cancel
通常fork和cancel配合使用，实现非阻塞任务，take是阻塞状态，也就是实现执行take的时候，无法继续向下执行，fork是非阻塞的，同样可以使用cancel取消一个fork任务
```
function* authorize(user, password) {
try {
const token = yield call(Api.authorize, user, password)
yield put({type: ‘LOGIN_SUCCESS‘, token})
} catch(error) {
yield put({type: ‘LOGIN_ERROR‘, error})
}
}

function* loginFlow() {
while(true) {
const {user, password} = yield take(‘LOGIN_REQUEST‘)
yield fork(authorize, user, password)
yield take([‘LOGOUT‘, ‘LOGIN_ERROR‘])
yield call(Api.clearItem(‘token‘))
}
}
```
当执行yield fork(authorize, user, password),同时执行yield take([‘LOGOUT‘, ‘LOGIN_ERROR‘])

### 错误处理
我们假设远程数据读取因为某些原因失败了，API函数API.fetch返回一个被拒绝(rejected)的Promise
```
import Api from ‘./Api‘
import { call, put } from ‘redux-saga/effects‘

// ...
function* fetchProducts() {
try {
const products = yield call(Api.fetch, ‘/products‘)
yield put({ type: ‘PRODUCTS_RECEIVED‘, products })
} catch (err) {
yield put({ type: ‘PRODUCTS_REQUEST_FAILED‘, err)
}
}
```

### takeEvery的使用
saga中的take并不支持action的循环调用，即遍历数组执行action，为解决该问题，可以使用takeEvery来执行action，此时即可实现遍历数组执行action。

```
import { call, put, takeEvery } from ‘redux-saga/effects‘

function* fetchUsr(action) {
const payload = action
try {
const user = yield call(api.getUser, payload)
yield put({ type: GET_ENTITIES_USER, user })
} catch (err) {
console.log(‘err: %o‘, err)
}
}

function* mySaga() {
//在每个 ‘GET_USER‘ action 被发起时调用 fetchUser
//允许并发（译注：即同时处理多个相同的 action）
takeEvery(actions.GET_USER, fecthUser)
}
```