React手稿之 React-Saga
阿新 • • 發佈:2018-12-21
Redux-Saga
redux-saga
是一個用於管理應用程式副作用(例如非同步獲取資料,訪問瀏覽器快取等)的javascript庫,它的目標是讓副作用管理更容易,執行更高效,測試更簡單,處理故障更容易。
redux-saga
相當於一個放置在action
與reducer
中的墊片。
之所以稱之謂副作用呢,就是為了不讓觸發一個action
時,立即執行reducer
。也就是在action
與reducer
之間做一個事情,比如非同步獲取資料等。
redux-saga
使用了ES6中的Generator
功能,避免了像redux-thunk
的回撥地獄。
如何使用
安裝
$ npm install --save redux-saga //或者 $ yarn add redux-saga
示例
假設有一個UI
介面,是根據使用者ID
顯示使用者詳情的。那麼我們需要通過介面從資料庫根據userId
來獲取資料。
簡單起見,我們在本地使用一個json
檔案來模擬資料庫資料。
{
"297ee83e-4d15-4eb7-8106-e1e5e212933c": {
"username": "Saga"
}
}
建立UI Component
import React from 'react'; import { USER_FETCH_REQUESTED } from '../../../actions/User'; export default class extends React.Component { constructor(props) { super(props); this.state = { userId: '297ee83e-4d15-4eb7-8106-e1e5e212933c' } } render() { const { userInfo = {}, dispatch } = this.props; return ( <React.Fragment> <button onClick={() => { dispatch({ type: USER_FETCH_REQUESTED, payload: { userId: this.state.userId } }); }}>Get User Info</button> <span>使用者名稱: {userInfo.username}</span> </React.Fragment> ); } }
建立saga
,這裡的saga
就相當於action
.
import { call, put, takeEvery } from 'redux-saga/effects' import { fetchUserApi } from '../api/user'; import { USER_FETCH_REQUESTED, USER_FETCH_SUCCEEDED, USER_FETCH_FAILED } from '../actions/User'; function* fetchUser({ payload }) { try { const user = yield call(fetchUserApi, payload.userId); yield put({ type: USER_FETCH_SUCCEEDED, user }); } catch (e) { yield put({ type: USER_FETCH_FAILED, message: e.message }); } } const userSaga = function* () { yield takeEvery(USER_FETCH_REQUESTED, fetchUser); } export default userSaga;
關於fetchUserApi
,我們會在後面的章節中描述。這裡僅獲取了json
檔案中與userId
相對應的資料。
把saga放入store
中:
import createSagaMiddleware from 'redux-saga';
import Sagas from '../sagas/index';
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(Sagas)
最後再實現相就的reducer即可:
import { USER_FETCH_SUCCEEDED } from '../actions/User';
const initialState = { user: {} };
export default (state = initialState, action) => {
switch (action.type) {
case USER_FETCH_SUCCEEDED:
return { ...state, user: action.user };
default:
return state;
}
}
推薦閱讀React 手稿