take函数可以理解为监听未来的action，它创建了一个命令对象，告诉middleware等待一个特定的action， Generator会暂停，直到一个与pattern匹配的action被发起，才会继续执行下面的语句，也就是说，take是一个阻塞的 effect
用法：
function* watchFetchData() { while(true) { // 监听一个type为 'FETCH_REQUESTED' 的action的执行，直到等到这个Action被触发，才会接着执行下面的 yield fork(fetchData) 语句 yield take('FETCH_REQUESTED'); yield fork(fetchData); } }
put(action)
put函数是用来发送action的 effect，你可以简单的把它理解成为redux框架中的dispatch函数，当put一个action后，reducer中就会计算新的state并返回，注意： put 也是阻塞 effect
用法：
export function* toggleItemFlow() { let list = [] // 发送一个type为 'UPDATE_DATA' 的Action，用来更新数据，参数为 `data：list` yield put({ type: actionTypes.UPDATE_DATA, data: list }) }
call(fn, ...args)
call函数你可以把它简单的理解为就是可以调用其他函数的函数，它命令 middleware 来调用fn 函数， args为函数的参数，注意： fn 函数可以是一个 Generator 函数，也可以是一个返回 Promise 的普通函数，call 函数也是阻塞 effect
用法：
export const delay = ms => new Promise(resolve => setTimeout(resolve, ms)) export function* removeItem() { try { // 这里call 函数就调用了 delay 函数，delay 函数为一个返回promise 的函数 return yield call(delay, 500) } catch (err) { yield put({type: actionTypes.ERROR}) } }
fork(fn, ...args)
fork 函数和 call 函数很像，都是用来调用其他函数的，但是fork函数是非阻塞函数，也就是说，程序执行完 yield fork(fn， args) 这一行代码后，会立即接着执行下一行代码语句，而不会等待fn函数返回结果后，在执行下面的语句
用法：
import { fork } from 'redux-saga/effects' export default function* rootSaga() { // 下面的四个 Generator 函数会一次执行，不会阻塞执行 yield fork(addItemFlow) yield fork(removeItemFlow) yield fork(toggleItemFlow) yield fork(modifyItem) }
select(selector, ...args)
select 函数是用来指示 middleware调用提供的选择器获取Store上的state数据，你也可以简单的把它理解为redux框架中获取store上的 state数据一样的功能 ：store.getState()
用法：
export function* toggleItemFlow() { // 通过 select effect 来获取 全局 state上的 `getTodoList` 中的 list let tempList = yield select(state => state.getTodoList.list) }
一个具体的实例
**index.js **
import React from 'react'; import ReactDOM from 'react-dom'; import {createStore, applyMiddleware} from 'redux' import createSagaMiddleware from 'redux-saga' import rootSaga from './sagas' import Counter from './Counter' import rootReducer from './reducers' const sagaMiddleware = createSagaMiddleware() // 创建了一个saga中间件实例 // 下边这句话和下边的两行代码创建store的方式是一样的 // const store = createStore(reducers,applyMiddlecare(middlewares)) const createStoreWithMiddleware = applyMiddleware(middlewares)(createStore) const store = createStoreWithMiddleware(rootReducer) sagaMiddleware.run(rootSaga) const action = type => store.dispatch({ type }) function render() { ReactDOM.render( <Counter value={store.getState()} onIncrement={() => action('INCREMENT')} onDecrement={() => action('DECREMENT')} onIncrementAsync={() => action('INCREMENT_ASYNC')} />, document.getElementById('root') ) } render() store.subscribe(render)
sagas.js
import { put, call, take,fork } from 'redux-saga/effects'; import { takeEvery, takeLatest } from 'redux-saga' export const delay = ms => new Promise(resolve => setTimeout(resolve, ms)); function* incrementAsync() { // 延迟 1s 在执行 + 1操作 yield call(delay, 1000); yield put({ type: 'INCREMENT' }); } export default function* rootSaga() { // while(true){ // yield take('INCREMENT_ASYNC'); // yield fork(incrementAsync); // } // 下面的写法与上面的写法上等效 yield* takeEvery("INCREMENT_ASYNC", incrementAsync) }
reducer.js
export default function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 case 'INCREMENT_ASYNC': return state default: return state } }
从上面的代码结构可以看出，redux-saga的使用方式还是比较简单的，相比较之前的redux框架的CounterApp，多了一个sagas的文件，reducers文件还是之前的使用方式
redux-saga基本用法总结：