redux-saga中间件的使用

最新推荐文章于 2023-12-21 18:17:43 发布
最新推荐文章于 2023-12-21 18:17:43 发布
阅读量1k 收藏 3
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ferrysoul/article/details/90314667
版权

公众号：CS阿吉

异步处理两种方式：redux-thunk,redux-saga(适用于特别大型的项目)

先展示redux-thunk:

todulist.js
//这个算是redux进阶的Demo
import React, { Component } from "react";
import store from "../../store";
import {
  getInputChangeValue,
  getAddItemAction,
  getDeleteItemAction,
  initListAction,
  getTodoList
} from "../../store/actionCreaters";
import ToDoListUI from './ToDoListUI';

class ToDoListUp extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    /**
     * 页面上的内容并没有随着store的更新而更新，所以如下操作:
     * store发生改变，则subscribe()绑定的函数会自动执行
     */
    store.subscribe(this.handleStoreChange);
  }

  componentDidMount() {
      const action = getTodoList();
    //   当调用store.dispatch把action发给store的时候，action会自动执行。
      store.dispatch(action);
  }

  // input值改变触发action
  handleInputChange(e) {
    //定义action两种方式，下面是最原始的一种：（1）
    // const action = {
    //   type: CHANGE_INPUT_VALUE,
    //   value: e.target.value
    // };
    //下面是改进的方式：（2）
    const action = getInputChangeValue(e.target.value);
    store.dispatch(action);

    console.log(e.target.value);
  }
  // 重新渲染页面数据
  handleStoreChange() {
    this.setState(store.getState());
  }
  // 提交输入内容
  handleButtonClick() {
    const action = getAddItemAction();

    store.dispatch(action);
  }
  // 点击列表电影名字，会删除电影
  handleItemDelete(index) {
    const action = getDeleteItemAction(index);
    store.dispatch(action);
  }

  render() {
    return (
      <ToDoListUI
        list={this.state.list}
        inputValue={this.state.inputValue}
        handleInputChange={this.handleInputChange}
        handleButtonClick={this.handleButtonClick}
        handleItemDelete={this.handleItemDelete}
      />
    );
  }
}

export default ToDoListUp;


store.js
import { createStore, applyMiddleware, compose } from "redux";
import reducer from './reducer';
import thunk from "redux-thunk";

/**
 * 在创建store的时候使用reducer构建初始数据
 * 在创建的时候会使用thunk和__REDUX_DEVTOOLS_EXTENSION__ 中间件
 * 这里的中间件指的是redux的中间件，而不是react
 * 
 */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk)
  // other store enhancers if any
);

const store = createStore(reducer, enhancer);

export default store;



actionType.js
import {
  CHANGE_INPUT_VALUE,
  ADD_TODO_ITEM,
  DELETE_TODO_ITEM,
  INIT_LIST_ACTION
} from "./actionTypes";
import axios from 'axios';

export const getInputChangeValue = (value) => ({
        type: CHANGE_INPUT_VALUE,
        value:value
});

export const getAddItemAction = () => ({
         type: ADD_TODO_ITEM,
});

export const getDeleteItemAction = (index) => ({
         type: DELETE_TODO_ITEM,
         index
});

export const initListAction = (data) => ({
         type: INIT_LIST_ACTION,
         data
});

export const getTodoList = () => {
  return (dispatch) => {
    axios("http://localhost:3000/mock/list.json")
      .then(res => {
        const data = res.data;
        // 改变store中的数据
        const action = initListAction(data);
        dispatch(action);
      })
      .catch(err => {
        console.log(err);
      });
  }
};

下面开始react-saga的使用：

store.js
import { createStore, applyMiddleware, compose } from "redux";
import reducer from './reducer';
import thunk from "redux-thunk";
import createSagaMiddleware from "redux-saga";


/**
 * 在创建store的时候使用reducer构建初始数据
 * 在创建的时候会使用thunk和__REDUX_DEVTOOLS_EXTENSION__ 中间件
 * 这里的中间件指的是redux的中间件，而不是react
 * 
 */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose;

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()

const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));


const store = createStore(reducer, enhancer);

export default store;



//新建一个saga.js文件
import { takeEvery,put } from "redux-saga/effects";
import {GET_INIT_LIST} from './actionTypes';
import {initListAction} from './actionCreaters';
import axios from 'axios';

function* getInitList(){
    try{
        const res = yield axios.get("http://localhost:3000/mock/list.json");
        const action = initListAction(res.data);
        yield put(action);
    }catch(e){
        console.log("网络请求失败");
    }
}

//generator函数
function* todoSagas(){
    yield takeEvery(GET_INIT_LIST, getInitList);
}

export default todoSagas;

store.js
import { createStore, applyMiddleware, compose } from "redux";
import reducer from './reducer';
import thunk from "redux-thunk";
import createSagaMiddleware from "redux-saga";
import todoSagas from './saga';


/**
 * 在创建store的时候使用reducer构建初始数据
 * 在创建的时候会使用thunk和__REDUX_DEVTOOLS_EXTENSION__ 中间件
 * 这里的中间件指的是redux的中间件，而不是react
 * 
 */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose;

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()

const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));

const store = createStore(reducer, enhancer);

// then run the saga
sagaMiddleware.run(todoSagas);

// render the application

export default store;


todolist.js
//这个算是redux进阶的Demo
import React, { Component } from "react";
import store from "../../store";
import {
  getInputChangeValue,
  getAddItemAction,
  getDeleteItemAction,
  initListAction,
  getInitList
  
} from "../../store/actionCreaters";
import ToDoListUI from './ToDoListUI';
import axios from 'axios';

class ToDoListUp extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    /**
     * 页面上的内容并没有随着store的更新而更新，所以如下操作:
     * store发生改变，则subscribe()绑定的函数会自动执行
     */
    store.subscribe(this.handleStoreChange);
  }

  componentDidMount() {
    const action = getInitList();
    store.dispatch(action);
    console.log(action);
  }

  // input值改变触发action
  handleInputChange(e) {
    //定义action两种方式，下面是最原始的一种：（1）
    // const action = {
    //   type: CHANGE_INPUT_VALUE,
    //   value: e.target.value
    // };
    //下面是改进的方式：（2）
    const action = getInputChangeValue(e.target.value);
    store.dispatch(action);

    console.log(e.target.value);
  }
  // 重新渲染页面数据
  handleStoreChange() {
    this.setState(store.getState());
  }
  // 提交输入内容
  handleButtonClick() {
    const action = getAddItemAction();

    store.dispatch(action);
  }
  // 点击列表电影名字，会删除电影
  handleItemDelete(index) {
    const action = getDeleteItemAction(index);
    store.dispatch(action);
  }

  render() {
    return (
      <ToDoListUI
        list={this.state.list}
        inputValue={this.state.inputValue}
        handleInputChange={this.handleInputChange}
        handleButtonClick={this.handleButtonClick}
        handleItemDelete={this.handleItemDelete}
      />
    );
  }
}

export default ToDoListUp;


actionType.js'
export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';
export const INIT_LIST_ACTION = "init_list_action";
export const GET_INIT_LIST = "get_init_list";

actionCreator.js
import {
  CHANGE_INPUT_VALUE,
  ADD_TODO_ITEM,
  DELETE_TODO_ITEM,
  INIT_LIST_ACTION,
  GET_INIT_LIST
} from "./actionTypes";
import axios from 'axios';

export const getInputChangeValue = (value) => ({
        type: CHANGE_INPUT_VALUE,
        value:value
});

export const getAddItemAction = () => ({
         type: ADD_TODO_ITEM,
});

export const getDeleteItemAction = (index) => ({
         type: DELETE_TODO_ITEM,
         index
});

export const initListAction = (data) => ({
         type: INIT_LIST_ACTION,
         data
});

export const getInitList = () => ({
  type:GET_INIT_LIST
})

lxhguard
关注
专栏目录
react redux中获取 store 数据并将数据渲染出来
北芒的博客
07-14 5256
前景提要 如果不了解基础的话 ----- 点击此处 本文着重实现效果，不会讲太多原理问题 创建 仓库骨架并书写初始代码 src 目录下创建 //store/index.js 代码 import { createStore } from 'redux'; import reducer from "./reducer" const store = createStore(reducer); export default store //store/reducer.js const redu.
react简书项目学习笔记25redux-saga中间件
MeiLuan_yahoho的博客
02-05 312
1.npm install redux-saga 2.store/index的配置 引入createSagaMiddleware，创建SagaMiddleware 通过applyMiddleware使用中间件 创建sagas.js文件 引入sagas.Js文件 sagas.Js文件的书写 通过sagamiddleware运行sagas.js文件 import createSagaMiddlewar...
redux中发送异步请求获取数据
ferrysoul的博客
05-18 3527
react axios访问本地json文件 解决方法：必须将json文件放到public文件夹下即可访问 (一)使用axios: //这个算是redux进阶的Demo import React, { Component } from "react"; import store from "../../store"; import { getInputChangeValue,...
Redux中发送异步请求获取数据
diwang_718的博客
08-26 1676
1：发送异步请求是在componentDidMount这个生命周期里执行的，用到的是axios请求接口,创建有一个action，将获取到的接口数据存进去，发送dispatch方法通知store修改里面的数据 代码： componentDidMount(){ axios.get('/todolist').then((res)=>{ const data = res.data const action = getInitListAction(data) st
【小程序taro 最佳实践】异步action优雅实践(简化流程)
weixin_34280237的博客
09-27 501
给大家提供思路，可以借鉴哈，有什么问题可以留言taro脚手架后面文章会慢慢讲解更多技巧https://github.com/wsdo/taro-... 概要 当我们拿到官方项目请求action的时候需要写两个函数(一个返回type,一个dispatch)，超级麻烦，如下所示。 function articleList(data) { ...
Redux的使用 + 中间件处理异步action+ redux持久化
最新发布
weixin_56295520的博客
12-21 1296
redux 遵循了一种单向数据流的架构模式，将整个应用的状态数据存储在一个全局的状态树store中，通过action和reducer来管理状态的变化。2、redux-promise 支持dispatch(Promise)、dispatch({type:“”,payload:Promise})redux是一个 js 的状态管理库，用于管理应用的全局状态。action必须是一个简单的对象，不能是异步的。在sagas.ts文件中监听到这个reducer为异步，则会调用自定义封装的异步函数，如果是同步则会放行。
redux-saga-in-chinese：Redux-saga-中文文档
02-19
redux-saga是一个redux中间件，意味着这个线程可以通过正常的redux action从主应用程序启动，暂停和取消，它能访问完整的redux状态，也可以调度redux操作。 redux-saga使用了ES6的Generator功能，让异步的流程更...
react-typescript-redux-saga:React Redux Redux-Saga打字稿样板
05-14
3. **Redux Saga**: Redux-Saga是Redux的中间件，专门用于处理副作用，如API调用、定时任务等。它使用generator函数来编写side effect逻辑，使得异步操作更加清晰、易于测试和调试。 4. **TypeScript**: TypeScript...
记录一篇关于redux-saga的基本使用过程
10-18
Redux-Saga 是一个用于处理 Redux 应用副作用的中间件，它通过 generators（生成器函数）来处理异步操作，让代码更易于测试和维护。本文将详细介绍如何在项目中基本使用 Redux-Saga。 首先，我们需要安装 Redux 和 ...
Redux-saga中间件
11-03
Redux-saga中间件使用方法和示例代码
react redux获取异步数据
weixin_45134477的博客
02-24 445
我自己使用json-server 模拟的数据 1.首先下载获取异步数据插件 redux-thunk npm i redux-thunk src下的仓库store下的store.js 的代码 import {createStore,applyMiddleware} from "redux" import reducer from "./reducer" import...
React中的dispatch()
czlj1998的博客
09-22 4547
reducer函数会根据action的类型来更新store中的状态，并返回一个新的状态对象。Redux会自动将新的状态对象与旧的状态进行比较，并更新组件的状态或重新渲染相应的组件。函数，我们可以在React组件中发起状态更新的请求，而不需要直接操作store或组件的状态。这种方式可以帮助我们保持组件的纯粹性和可重用性，同时将状态的管理集中在Redux中，使代码更加清晰和可维护。它是Redux中的一个核心概念，用于将action传递给store，从而触发相应的状态更新。函数是Redux提供的一个方法，
redux-saga框架使用详解
聆听。。花开雨落的博客
01-30 1046
什么是redux-saga redux-saga 是一个用于管理 Redux 应用异步操作的中间件（又称异步 action）。 redux-saga 通过创建 Sagas 将所有的异步操作逻辑收集在一个地方集中处理，可以用来代替 redux-thunk 中间件。 这意味着应用的逻辑会存在两个地方： Reducers 负责处理 action 的 state 更新 Sagas ...
redux-saga及中间件的原理~~~~~~~
gercke的博客
11-21 310
一.redux-saga 1. ES6的generator saga中间件使用了ES6的generator语法 所以我们有必须简单讲解一下： 注意：我这里并没有列出generator的所有用法，事实上它的用法非常的灵活，大家可以自行去学习一下。 在JavaScript中编写一个普通的函数，进行调用会立即拿到这个函数的返回结果： function foo() { return "Hello World"; } foo() // Hello World 如果我们将这个函数编写成一个生成器函数：
react-10（generator函数，redux-saga中间件）
weixin_45626517的博客
10-26 588
redux的另一个中间件。 前置知识点：ES6 generator函数 generator函数 生成器的意思。是普通函数，但是带了一个 * 号 经典形态： function* test(){} function * test(){} function *test(){} 分段使用： generator函数是暂缓执行的，可以分段使用，比如我们调用 function* test(){ console.log(1) } test() //没有任何...
redux-saga入门
webchang的博客
03-16 3907
redux-saga的介绍、API、使用案例
thunk及saga中间件使用指南大全
qq_39261142的博客
10-21 1087
文章目录Redux中间件加载中间件redux-thunk原理使用action处理redux-saga基础配置异步调用创建Effectsputtakecall 和 fork辅助函数组合器代码设计思路超时自动取消高阶函数封装thunk和saga查看中间件状态redux-loggerredux-devtools Redux中间件 一般使用中间件的原因都是为了处理异步操作（通常是指在action中执行ajax请求） 异步action（因为要保证reducer的纯净，因此不能外调api，所以在action里处理）
彻彻底底教会你使用Redux-saga(包含样例代码)
weixin_34337381的博客
07-10 1512
Redux-saga使用心得总结（包含样例代码）， 本文的原文地址：原文地址 本文的样例代码地址：样例代码地址 ，欢迎star 最近将项目中redux的中间件，从redux-thunk替换成了redux-saga，做个笔记总结一下redux-saga的使用心得，阅读本文需要了解什么是redux，redux中间件的用处是什么？如果弄懂上述两个概念，就可以继续阅读本文。 redux-thunk...
深入理解Redux-saga中间件与核心API
Redux-saga中间件是React应用中处理异步逻辑的重要组件，尤其是在使用Redux状态管理库时。它的主要目的是简化异步数据获取、错误处理和应用中的复杂流程控制。与redux-thunk不同，Redux-saga将所有异步操作集中在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值