資訊專欄INFORMATION COLUMN
摘要：相當(dāng)于一個(gè)放置在與中的墊片。之所以稱之謂副作用呢，就是為了不讓觸發(fā)一個(gè)時(shí)，立即執(zhí)行。也就是在與之間做一個(gè)事情，比如異步獲取數(shù)據(jù)等。使用了中的功能，避免了像的回調(diào)地獄。把放入中最后再實(shí)現(xiàn)相就的即可在線示例推薦閱讀手稿
Redux-Saga
redux-saga 是一個(gè)用于管理應(yīng)用程序副作用（例如異步獲取數(shù)據(jù)，訪問瀏覽器緩存等）的javascript庫(kù)，它的目標(biāo)是讓副作用管理更容易，執(zhí)行更高效，測(cè)試更簡(jiǎn)單，處理故障更容易。
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顯示用戶詳情的。那么我們需要通過(guò)接口從數(shù)據(jù)庫(kù)根據(jù)userId來(lái)獲取數(shù)據(jù)。
簡(jiǎn)單起見，我們?cè)诒镜厥褂靡粋€(gè)json文件來(lái)模擬數(shù)據(jù)庫(kù)數(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 (
用戶名： {userInfo.username}
);
}
}
創(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,我們會(huì)在后面的章節(jié)中描述。這里僅獲取了json文件中與userId相對(duì)應(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;
}
}
在線示例
推薦閱讀React 手稿
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99187.html
摘要：官方也陳述，接下來(lái)的的工作會(huì)投入到中。從目前官方的文檔可以看出，從以下四個(gè)方面來(lái)提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說(shuō)明到目前為止，在已發(fā)布的版本中有該功能，想體驗(yàn)該功能，必須安裝。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。 官方也陳述，接下來(lái)的90%的工作會(huì)投入到React ...
摘要：屬性是必須的。需要一個(gè)與的一致。必須在的返回原。調(diào)試插件日志安裝組件。然后加入到中即可例如擴(kuò)展程序需要在應(yīng)用市場(chǎng)安裝然后在中使用增強(qiáng)功能將加入即可在線實(shí)例推薦閱讀手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 屬性是必須的。...
摘要：類型檢查是為了確保傳入組件的參數(shù)正確性。通常在項(xiàng)目中可以使用或者來(lái)實(shí)現(xiàn)。示例以上內(nèi)容在實(shí)現(xiàn)一個(gè)通用組件時(shí)非常有用。類型檢查和參數(shù)默認(rèn)值一起使用，保證組件的正常運(yùn)行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數(shù)正確性。 通常在項(xiàng)目中可以使用Flow或者TypeScript來(lái)實(shí)現(xiàn)。 React提供了PropTypes來(lái)檢查類型。 示例： imp...
摘要：示例使用場(chǎng)景代碼復(fù)用類似版本之前的。多個(gè)組件同用一段代碼，或者同樣的方法時(shí)，可以使用。示例在線示例抽象和更改可以通過(guò)包裹的組件公共抽象出來(lái)?？梢酝ㄟ^(guò)包裹的組件傳遞修改添加等的示例渲然劫持條件渲然。示例反向繼承返回的高階組件類繼承了。 Higher-Order Components HOC 不是React的標(biāo)準(zhǔn)API。 HOC 是一個(gè)函數(shù)。 HOC 返回一個(gè)Component。 示例...
摘要：提供了除之外的傳參數(shù)的方式。是全局跨組件傳遞數(shù)據(jù)的。在線示例推薦閱讀手稿 Context Context提供了除props之外的傳參數(shù)的方式。 Context是全局跨組件傳遞數(shù)據(jù)的。 API React.createContext const {Provider, Consumer} = React.createContext(defaultValue); Provider ...
閱讀 3697·2021-09-07 10:19
閱讀 3639·2021-09-03 10:42
閱讀 3592·2021-09-03 10:28
閱讀 2560·2019-08-29 14:11
閱讀 819·2019-08-29 13:54
閱讀 1604·2019-08-29 12:14
閱讀 426·2019-08-26 12:12
閱讀 3624·2019-08-26 10:45
