前端應(yīng)用消失的部分

一個(gè)現(xiàn)代的、使用了redux的前端應(yīng)用架構(gòu)可以這樣描述：

1. 一個(gè)存儲了應(yīng)用不可變狀態(tài)（state）的store
2. 狀態(tài)（state）可以被繪制在組件里（html或者其他的東西）。這個(gè)繪制方法通常是簡單而且可測試的（并不總是如此）純方法。

const render = (state) => components

3. 組件可以給store分發(fā)action
4. 使用reducer這種純方法來根據(jù)就的狀態(tài)返回新的狀態(tài)

const reducer = (oldState, action) => newState

5. 從一再來一次

這看起來容易理解。但是當(dāng)需要處理異步的action（在函數(shù)式編程里稱為副作用）的時(shí)候事情就沒有這么簡單了。

為了解決這個(gè)問題，redux建議使用中間件（尤其是thunk）?；旧?，如果你需要出發(fā)副作用（side effects），使用一種特定的action生成方法：一種返回一個(gè)方法的方法，可以實(shí)現(xiàn)任意的異步訪問并分發(fā)任意你想要的action。

使用這個(gè)方式會很快導(dǎo)致action生成方法變得復(fù)雜并難以測試。這個(gè)時(shí)候就需要redux-saga了。在redux-saga里saga就是一個(gè)可聲明的組織良好的副作用實(shí)現(xiàn)方式（超時(shí)，API調(diào)用等等。。）所以不用再用redux-thunk中間件來寫，我們用saga來發(fā)出action并yield副作用。

這樣不復(fù)雜？action creator這樣的寫法不是更簡單？

雖然看起來是這樣的，但是NO！

我們來看看如何寫一個(gè)action creator來獲取后端數(shù)據(jù)并分發(fā)到redux store。

function loadTodos() {
  return dispatch => {
    dispatch({ type: 'FETCH_TOTOS' });
    fetch('/todos').then(todos => {
      dispatch({ type: 'FETCH_TODOS', payload: todos });
    });
  }
}

這是最簡單的thunk action creator了，并且如你所見，唯一測試這個(gè)代碼的方法是模擬獲取數(shù)據(jù)的方法。

我們來看看用saga代替action creator獲取todo數(shù)據(jù)的方法：

import { call, put } from 'redux-saga';

function* loadTodos() {
  yield put({ type: 'FETCH_TODOS' });
  const todos = yield call(fetch, '/todos');
  yield put({ type: 'FETCH_TODOS', payload: todos });
}

正如你所見一個(gè)saga就是一個(gè)生成副作用（side effects）的generator。我（作者）更加傾向于把整個(gè)generator叫做純generator，因?yàn)樗粫?shí)際執(zhí)行副作用，只會生成一個(gè)要執(zhí)行的副作用的描述。在上面的例子中我用了兩種副作用：

• 一個(gè)put副作用，它會給redux store分發(fā)一個(gè)action。
• 一個(gè)call副作用，它會執(zhí)行一個(gè)異步的方法（promise，cps后者其他的saga）。

現(xiàn)在，測試這個(gè)saga就非常的容易了：

import { call, put } from 'redux-saga';

const mySaga = loadTodos();
const myTodos = [{ message: 'text', done: false }];
mySaga.next();
expect(mySaga.next().value).toEqual(put({ type: 'FETCH_TOTOS' }));
expect(mySaga.next().value).toEqual(call(fetch, '/todos'));
expect(mySaga.next().value).toEqual(put({ type: 'FETCH_TODOS', payload: myTodos }));

觸發(fā)一個(gè)saga

thunk的action creator在分發(fā)它返回的方法的時(shí)候就會觸發(fā)。saga不同，它們就像是運(yùn)行在后臺的守護(hù)任務(wù)（daemon task）一樣有自己的運(yùn)行邏輯（by Yasine Elouafi redux-saga的作者）。

所以，我們來看看如何在redux應(yīng)用里添加saga。

import { createStore, applyMiddleware } from 'redux';
import sagaMiddleware from 'redux-saga';

const createStoreWithSaga = applyMiddleware(
  sagaMiddleware([loadTodos])
)(createStore);

let store = createStoreWithSaga(reducer, initialState);

綁定saga

一個(gè)saga本身就是一個(gè)副作用，就如同redux的reducer一樣，綁定saga非常簡單（但是很好的理解ES6的generator是非常有必要的）。

在之前的例子里，loadTodos saga在一開始就會觸發(fā)。但是，如果我們想要每次一個(gè)action分發(fā)到store的時(shí)候觸發(fā)saga要怎么做呢？看代碼：

import { fork, take } from 'redux-saga';

function* loadTodos() {
  yield put({ type: 'FETCHING_TODOS' });
  const todos = yield call(fetch, '/todos');
  yield put({ type: 'FETCHED_TODOS', payload: todos });
}

function* watchTodos() {
  while(yield take('FETCH_TODOS')) {
    yield fork(loadTodos);
  }
}

// 我們需要更新saga常量 createStoreWithSaga = applyMiddleware(
  sagaMiddleware([watchTodos])
)(createStore);

上例用到了兩個(gè)特殊的effect：

• take effect，它會等待分發(fā)redux action的時(shí)候執(zhí)行
• fork effect, 它會觸發(fā)另外一個(gè)effect，在子effect開始之前就會執(zhí)行

結(jié)語

給前端應(yīng)用添加redux和redux-saga的流程是這樣的：

1. store持有一個(gè)應(yīng)用的state。
2. state會被繪制到組件上（html或者其他的什么）。它是一個(gè)簡單可測試的方法：

const render = (state) => components

3. 組件會觸發(fā)修改store的action。
4. state使用reducer這樣的純方法來修改的。

const reducer = (oldState, action) => newState

5. 也許某些effect會被一個(gè)action或者其他的effect觸發(fā)。

function* saga() { yield effect; }

6. 從1開始。

原文鏈接：https://riad.blog/2015/12/28/redux-nowadays-from-actions-creators-to-sagas/