React手稿之 React-Saga的詳解
Redux-Saga
redux-saga 是一個(gè)用于管理應(yīng)用程序副作用(例如異步獲取數(shù)據(jù),訪問瀏覽器緩存等)的javascript庫,它的目標(biāo)是讓副作用管理更容易,執(zhí)行更高效,測試更簡單,處理故障更容易。
redux-saga相當(dāng)于一個(gè)放置在action與reducer中的墊片。
之所以稱之謂副作用呢,就是為了不讓觸發(fā)一個(gè)action時(shí),立即執(zhí)行reducer。也就是在action與reducer之間做一個(gè)事情,比如異步獲取數(shù)據(jù)等。
redux-saga使用了ES6中的Generator功能,避免了像redux-thunk的回調(diào)地獄。
如何使用
安裝
$ npm install --save redux-saga //或者 $ yarn add redux-saga
示例
假設(shè)有一個(gè)UI界面,是根據(jù)用戶ID顯示用戶詳情的。那么我們需要通過接口從數(shù)據(jù)庫根據(jù)userId來獲取數(shù)據(jù)。
簡單起見,我們在本地使用一個(gè)json文件來模擬數(shù)據(jù)庫數(shù)據(jù)。
{ "297ee83e-4d15-4eb7-8106-e1e5e212933c": { "username": "Saga" } }
創(chuàng)建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> ); } }
創(chuàng)建saga,這里的saga就相當(dāng)于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;
關(guān)于fetchUserApi,我們會在后面的章節(jié)中描述。這里僅獲取了json文件中與userId相對應(yīng)的數(shù)據(jù)。
把saga放入store中:
import createSagaMiddleware from 'redux-saga'; import Sagas from '../sagas/index'; const sagaMiddleware = createSagaMiddleware() const store = createStore( reducer, applyMiddleware(sagaMiddleware) ) sagaMiddleware.run(Sagas)
最后再實(shí)現(xiàn)相就的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; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React中useState的使用方法及注意事項(xiàng)
useState通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關(guān)于React中useState的使用方法及注意事項(xiàng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Mobx實(shí)現(xiàn)React?應(yīng)用的狀態(tài)管理詳解
這篇文章主要為大家介紹了Mobx?實(shí)現(xiàn)?React?應(yīng)用的狀態(tài)管理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12