资讯专栏INFORMATION COLUMN

redux-saga学习(三)

wdzgege / 467人阅读

摘要:安装参考地址链接描述简单使用对应创建把对应的请求统一放在来管理网络请求失败

redux-saga

安装redux-saga(参考githup 地址:链接描述)

</>复制代码

  1. yarn add redux-saga

redux-saga简单使用

</>复制代码

  1. import { createStore ,applyMiddleware ,compose } from "redux";
  2. import createSagaMiddleware from "redux-saga";
  3. import mySaga from "./sagas";
  4. // import thunk from "redux-thunk";
  5. import reducer from "./reducer";
  6. const sagaMiddleware = createSagaMiddleware()
  7. const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ }) : compose;
  8. const enhancer = composeEnhancers(
  9. applyMiddleware(sagaMiddleware)
  10. );
  11. const store = createStore(
  12. reducer,
  13. enhancer
  14. );
  15. sagaMiddleware.run(mySaga);
  16. export default store;

对应创建sagas.js,把对应的请求统一放在sagas.js来管理

</>复制代码

  1. import { put, takeEvery } from "redux-saga/effects";
  2. import { GET_LIST_DATA } from "./actionTypes";
  3. import { initList } from "./actionCreators";
  4. import axios from "axios";
  5. function* fetchUser(action) {
  6. try {
  7. let resData = yield axios.get("/list.json");
  8. const data = resData.data.list;
  9. console.log(data);
  10. yield put(initList(data))
  11. } catch (e) {
  12. console.log("网络请求失败")
  13. }
  14. }
  15. function* mySaga() {
  16. yield takeEvery(GET_LIST_DATA, fetchUser);
  17. }
  18. export default mySaga;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54898.html

相关文章

  • redux-saga学习()

    摘要:安装参考地址链接描述简单使用对应创建把对应的请求统一放在来管理网络请求失败 redux-saga 安装redux-saga(参考githup 地址:链接描述) yarn add redux-saga redux-saga简单使用 import { createStore ,applyMiddleware ,compose } from redux; import createSagaM...

    Pluser 评论0 收藏0
  • redux-saga学习()

    摘要:安装参考地址链接描述简单使用对应创建把对应的请求统一放在来管理网络请求失败 redux-saga 安装redux-saga(参考githup 地址:链接描述) yarn add redux-saga redux-saga简单使用 import { createStore ,applyMiddleware ,compose } from redux; import createSagaM...

    pingan8787 评论0 收藏0
  • React 实践项目 (Redux-Saga

    摘要:在上已经有接近的数了,是目前最热门的前端框架。并且这个任务是最后被启动的那个。如果之前已经有一个任务在执行,那之前的这个任务会自动被取消。如果我们允许多个实例同时启动。或者直到被了,如果是这种情况,将在中抛出一个错误。完整项目代码地址 React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React+R...

    ranwu 评论0 收藏0
  • redux-saga框架使用详解及Demo教程

    摘要:通过创建将所有的异步操作逻辑收集在一个地方集中处理,可以用来代替中间件。 redux-saga框架使用详解及Demo教程 前面我们讲解过redux框架和dva框架的基本使用,因为dva框架中effects模块设计到了redux-saga中的知识点,可能有的同学们会用dva框架,但是对redux-saga又不是很熟悉,今天我们就来简单的讲解下saga框架的主要API和如何配合redux框...

    Nosee 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<