精华内容
下载资源
问答
  • 自己封装Redux 中间件

    2019-08-28 15:25:03
    一、类似于redux-logger的打印效果 const logger = store => next => action => { console.group(action.type) console.log(colors.yellow('pre state'), store.getState()) console.log(colors.blue('...

    一、类似于redux-logger的打印效果

    const logger = store => next => action => {
      console.group(action.type)
      console.log(colors.yellow('pre state'), store.getState())
      console.log(colors.blue('action'), action)
      let result = next(action)
      console.log(colors.green('next state'), store.getState())
      console.groupEnd(action.type)
      return result
    }
    
     store = createStore(
      rootReducer ,
      applyMiddleware(logger)
    )
    

    实现的效果是这样的
    在这里插入图片描述


    二、'redux-thunk’类似,可以在action 里传入 dispatch getState

    const thunk = store => next => action =>{
      typeof action === 'function' ?
        action(store.dispatch, store.getState) :
        next(action)
    }
    

    三、

    展开全文
  • redux中间件

    2021-06-03 10:14:19
    Redux 中间件 什么是中间件中间件本质上就是一个函数,Redux允许我们通过中间件的方式,扩展和增强Redux应用程序,增强体现在对action处理能力上,之前的计数器与弹出框案例中。actions都是直接被reducer函数处理...

    Redux 中间件

    什么是中间件?

    中间件本质上就是一个函数,Redux允许我们通过中间件的方式,扩展和增强Redux应用程序,增强体现在对action处理能力上,之前的计数器与弹出框案例中。actions都是直接被reducer函数处理的,再加入了中间件以后,在出发了一个action之后这个action会优先被中间件处理,当中间处理完这个action以后,中间件会把这个action传递给reducer,让reducer继续处理

    加入了中间件Redux 工作流程

    工作流程

    开发Redux 中间件

    开发中间件模版代码,本质上是一个函数,并且是一个科里化的一个函数

    export default store => next => action => {}
    

    这个函数中要求我们返回一个函数,在这个返回的函数中要求我们再返回一个函数,在最里层的函数中我们可以执行我们自己的业务逻辑,在最外层的函数中给我们提供了一个参数叫store,可以用store.getState获取当前state状态,也可以使用store.dispatch来触发另外一个action,至于干什么具体根据使用的业务逻辑来决定。在最里层的函数也有一个形参,这个形参就是组件触发的action对象,可以根据action.type来决定是否对当前action进行处理。中间的函数也有一个参数,这个参数是一个函数,我们称之为next,在我们执行完了逻辑代码之后,我们要去调用next方法,把当前action 传递给reducer,或者说传递给下一个中间件,因为中间件可以有多个。中间件开发好之后需要引入我们写的中间件并且注册给redux。

    注册中间件

    import { createStore, applyMiddleware } from 'redux'
    import logger from './middlewares/logger'
    
    createStore(reducer, applyMiddleware(
    	logger
    ))
    

    开发一个中间件

    实现一个打印每次action操作的中间件

    1. 新建 src/store/middleware/logger.js 文件,在这个文件中导出一个中间件我们这里打印上
    // eslint-disable-next-line import/no-anonymous-default-export
    export default store => next => action => {
        console.log(store.getState())
    
        console.log(action)
    
        // next 必须调用  并且必须传第 action
        next(action)
    }
    
    1. 在store/index.js 中注册中间件
    import logger from './middleware/logger'
    import { applyMiddleware } from 'redux'
    
    export const store = createStore(RootReducer, applyMiddleware(logger))
    

    这个时候中间件就可以使用了,运行项目可以看到中间件已经开始工作了,单个中间件已经注册好了,那么多个中间件怎么注册呢,多个中间件的运行顺序又是怎么样的呢,多个中间件就是在applyMiddleware的多个参数

    1. 我们新建 src/store/middleware/test.js 文件 注册另一个中间件这个test中间件打印一句话,并在store/index.js来注册中间件,并交换注册顺序来查看中间件执行顺序
    //src/store/middleware/test.js
    export default store => next => action => {
        console.log('test 中间件')
        next(action)
    }
    // src/store/index.js
    
    import { createStore } from 'redux';
    import RootReducer from './reducers/root.reducers'
    import { applyMiddleware } from 'redux'
    import logger from './middleware/logger'
    import test from './middleware/test'
    export const store = createStore(RootReducer, applyMiddleware(test  ,logger))
    

    从上可以看出中间件的执行顺序就是注册顺序

    通过中间件开发实例thunk

    计数器新需求

    点击±按钮的时候延时2秒再执行

    思路:在中间件拦截 加减操作的 action 等到事件到了之后再执行next方法

    1. 新建src/store/middleware/thunk.js 中间件,在这个中间件中拦截 ± 操作的action 延迟两秒再执行next方法,并在store/index.js文件中注册这个中间件
    // src/store/middleware/thunk.js
    import { INCREMENT, DECREMENT } from './../const/counter.const'
    
    export default store => next => action => {
    	  if (action.type === INCREMENT || action.type === DECREMENT) {
            setTimeout(() => {
                next(action)
            }, 2000)
        }else{
            next(action)
        }
    }
    
    // src/store/index.js  注册中间件
    import thunk from './middleware/thunk'
    export const store = createStore(RootReducer, applyMiddleware(test, logger, thunk))
    

    这里虽然可以实现这个延迟执行这个功能,但是代码还不够灵活。中间件只关注是异步还是同步操作这样代码就灵活多了

    1. 改造中间件
    1. 当这个中间件函数不关心你想执行什么异步操作,只关心你执行的是不是异步操作
    2. 如果你执行的是异步操作,再你触发action的时候,给中间件传递一个函数,如果执行的是同步操作就传递一个正常action对象
    3. 异步操作代码要写在传递进来的函数中
    4. 当前这个中间件的函数在点用你传递进来的函数时,要将dispatch方法传递进去
    import { INCREMENT, DECREMENT } from './../const/counter.const'
    
    export default store => next => action => {
        if (typeof action === 'function') {
            return  action(store.dispatch)
        }
        next(action)
    }
    
    1. 在action中去新增加异步函数,并在视图中绑定事件的时候绑定异步函数
    // src/store/actions/counter.actions.js
    export const increment_async = payload => dispatch => {
        setTimeout(() => {
            dispatch(increment(payload))
        }, 2000);
    }
    
    // src/components/Count.js视图中更改绑定的事件
    function Count({count,increment_async,decrement}) {
        return <div>
            <button onClick={() => increment_async(5)}>+</button>
            <span>{count}</span>
            <button onClick={() => decrement(5)}>-</button>
        </div>
    }
    

    这样我们并序需要在中间件中做具体异步操作,只需要在中间件中判断是异步还是同步操作,异步操作时执行我们传递进来的函数并传递 dispatch 给我们传递的异步函数,在异步函数中执行异步操作,并去触发真正的action动作

    原文地址: https://kspf.xyz/archives/20/

    展开全文
  • Redux中间件

    2019-07-25 16:36:10
    Redux中间件 1、applyMiddleware 方便调试,实时触发,线下使用 import {createStore,applyMiddleware} from 'redux'; import reducers from './reducers'; import Logger from 'redux-logger'; export default...

    Redux中间件

    1、applyMiddleware

    方便调试,实时触发,线下使用

        import {createStore,applyMiddleware} from 'redux';
        import reducers from './reducers';
        import Logger from 'redux-logger';
        export default createStore(reducers, applyMiddleware(Logger))
    
    2、redux-thunk

    目的:异步解决方案
    支持action的写法有对象变为函数
    可以发送多个dispatch
    改变action
    同时会帮我们注入两个参数dispatch和getState
    在异步操作完成之后再触发dispatch操作

    dispatch((dispatch, getState)=>{
        // getState可以获取全局的state
        dispatch({
            type:"START"
        })
        fetch('/data.json')
        .then(res=>res.json())
        .then(success=>{
            if(success){
                dispatch({
                    type:"FETCH_LIST",
                    payLoad:success.arr
                })
            }else{
                dispatch({
                    type:"FETCH_TAIL"
                })
            }
        })
    })
    

    3、redux-saga

    拦截请求
    解决异步
    不会改变action
    take 拦截
    takeEvery 每次都拦截
    

    4、redux-thunk

    改写action

    展开全文
  • Redux 中间件

    2021-02-10 17:20:08
    中间件本质是就是一道函数,redux允许我们通过中间件的方式扩展和增强redux的应用,体现在action的处理逻辑上, 加载中间件之后,action会先被中间件处理,中间件在返回给reducer 开发redux中间件 源码地址:...

    中间件概念

    什么是中间件

    中间件本质是就是一道函数,redux允许我们通过中间件的方式扩展和增强redux的应用,体现在action的处理逻辑上,
    加载中间件之后,action会先被中间件处理,中间件在返回给reducer

    开发redux的中间件

    源码地址:https://github.com/qifutian/learngit/tree/main/redux%E5%8F%8A%E4%B8%AD%E9%97%B4%E4%BB%B6/react-redux-guide

    redux的中间件本质是一道函数,并且是函数柯里化的函数

    开发中间件的模板代码

    export default store => next => action => { }
    store是传过来的store仓库
    next是函数的参数,也是一个函数,当中间件逻辑完成后,会调用next,目的是把当前action传给reducer,或是下一个中间件
    

    注册中间件

    中间件在开发完成以后资源被注册才能在redux的流程中生效

    import {createStore,applyMiddleware} from 'redux'
    import logger from './middlewares/logger'
    
    createStore(reducer,applyMiddleware(logger))
    开发的logger作为参数被redux应用
    

    开发中间件的功能,就是在触发action之后,会将对应的信息打印到控制台中

    在已有项目中新建middleware文件夹,新建logger.js

    export default function (){
       return function(next){
          return function(action){
    
         }
       }
    }
    
    或者ES6方式
    
    export default store => next =>{
      console.log(action)
      console.log(action)
      next(action) // 必须调用next,要不然就传递不了action,reducer也接收不到
    }
    

    注册中间件
    需要redux中的applyMiddleware方法

    import { createStore, applyMiddleware } from "redux";
    import RootReducer from "./reducers/root.reducer";
    
     import logger from "./middleware/logger";
    export const store = createStore(RootReducer, applyMiddleware(logger));
    

    在点击事件触发action中,会获取到action

    多个中间件只需要在logger后面继续增加就好,调用顺序也是先logger,然后是之后的

    加入中间件的工作流程

    在这里插入图片描述

    中间件异步执行action

    新建thunk.js

    让对应的事件延迟执行2秒

    export default ({dispatch}) => next => action => {
      
      if (typeof action.type === 'increment') {
        setTimeout(()=>{
             next(action)
         },2000)
      }
    
    }
    

    在index.js注册

    import { createStore, applyMiddleware } from "redux";
    import RootReducer from "./reducers/root.reducer";
    import thunk from './middleware/thunk';
    
     import logger from "./middleware/logger";
    export const store = createStore(RootReducer, applyMiddleware(logger,thunk));
    
    
    export default ({dispatch}) => next => action => {
      // 1. 当前这个中间件函数不关心你想执行什么样的异步操作 只关心你执行的是不是异步操作
      // 2. 如果你执行的是异步操作 你在触发action的时候 给我传递一个函数 如果执行的是同步操作 就传递action对象
      // 3. 异步操作代码要写在你传递进来的函数中
      // 4. 当前这个中间件函数在调用你传递进来的函数时 要将dispatch方法传递过去
      if (typeof action === 'function') {
        return action(dispatch)
      }
      next(action)
    }
    

    常用的中间件

    redux-thunk

    下载 npm insatll redux-thunk

    引入

    import { createStore, applyMiddleware } from "redux";
    import RootReducer from "./reducers/root.reducer";
    
    import thunk form "redux-thunk"
    
    export const store = createStore(RootReducer, applyMiddleware(thunk));
    
    

    使用,异步调用

    export const increment_async = payload =>dispatch => {
      setTimeout(()=>{
         dispatch(increment(payload))
      },2000)
    }
    

    redux-saga

    redux-saga解决问题:saga可以将异步操作从Action Creator 文件中抽离出来,放在单独一个文件中
    项目代码更好维护

    下载 npm install redux-saga

    import createSagaMidddleware from 'redux-saga';
    // 创建 sagaMiddleware
    const sagaMiddleware = createSagaMidddleware();
    
    
    export const store = createStore(RootReducer, applyMiddleware(sagaMiddleware));
    

    使用saga接收action进行异步操作

    import { takeEvery, put, delay } from 'redux-saga/effects';
    import { increment } from '../actions/counter.actions';
    import { INCREMENT_ASYNC } from '../const/counter.const';
    
    // takeEvery 接收 action
    // put 触发 action
    
    function* increment_async_fn (action) {
      yield delay(2000);
      yield put(increment(action.payload))
    }
    
    export default function* counterSaga () {
      // 接收action
      yield takeEvery(INCREMENT_ASYNC, increment_async_fn)
    }
    

    启动saga

    import rootSaga from './sagas/root.saga';
    
    // 启动 counterSaga
    sagaMiddleware.run(rootSaga)
    

    步骤:

    1. 在index.js中引入saga中间件,调用sagaMiddleware,在redux中使用applyMiddleware方法注册
    2. 导入conunter.saga.js,在当前文件中引入saga的takeEvery接收action并绑定方法,put触发action,delay延迟调用
    3. 在index的sagaMiddleware.run(rootSaga)启动saga

    redux-saga的action传参

    在组件中处理方法时需要 以函数形式 <button onClick = {() => increment_async(20)}>

    处理action中,export const increment_async = payload => ({type: INCREMENT_ASYNC, payload});

    在counter.saga.js中,takeEvery处理的函数接收action参数,被reducer中接收到
    function* increment_async_fn (action) {
    yield delay(2000);
    yield put(increment(action.payload))
    }

    在reducer中根据type类型,返回给页面

    saga合并
    saga可以进行拆分,更有利于维护,用all方法进行合并

    import { all } from 'redux-saga/effects';
    import counterSaga from './counter.saga';
    import modalSaga from './modal.saga';
    
    export default function* rootSaga () {
      yield all([
        counterSaga(),
        modalSaga()
      ])
    }
    

    redux-actions 中间件的使用

    redux-actions解决的问题: redux流程中大量的样板读写很痛苦,使用redux-actions可以简化Action和Reducer的处理
    下载 : npm install redux-actions

    使用

    创建Action

    import {createAction} from 'redux-actions'
    const increment_action = createAction("increment")
    

    创建Reducer

    import { handleActions as createReducer } from 'redux-actions'
    import { increment_action,decrement_action } from '../actions/counter.action'
    
    const initialState = {count:0}
    const counterReducer = createReducer({
       [increment_action]:(state,action) =>({count:state.count + 1})
    
    },initialState)
    
    export default counterReducer
    
    展开全文
  • redux 中间件

    2017-01-06 07:33:08
    redux中间件的执行顺序 action ---> dispatcher ---> middleware 1 ---> middleware 2 ---> reducers redux中间件函数必须遵循一个严格的函数结构 var anyMiddleware = function ({ dispatch, getSt...
  • 文章目录1、redux中间件简介1.1、什么是redux中间件1.2、使用redux中间件2、中间件的运行机制2.1、createStore源码分析2.2、applyMiddleware源码分析3、常见的redux中间件3.1、logger日志中间件3.2、redux异步管理...
  • redux中间件详解

    2021-07-30 11:33:13
    1、redux中间件简介 1.1、什么是redux中间件 redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> ...
  • Redux中间件解析

    2021-07-22 19:43:00
    Redux中间件解析 1. Redux的工作原理 redux对于我们进行全局的状态管理是非常有用的,我们可以省去很多力气去管理组件间的状态传递等等 redux中的核心api和作用 redux解决的真正问题是React组件间的状态共享和...
  • Redux中间件 redux中间件类似Express的中间件,在Express中中间件运行于接收到request到返回response之间,redux中间件运行于action发出到reducer执行之间。他们的实现都是为了原本功能的增强。 实质 中间件的执行...
  • 本篇文章主要介绍了redux中间件之redux-thunk的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 中间件是个什么东西? redux中管理数据的流程是单向的,就是说,从派发动作一直到发布订阅触发渲染是一条路走到头,那么如果想要在中间添加或是更改某个逻辑就需要找到action或是reducer来修改,有没有更方便的做法...
  • redux中间件剖析

    2020-12-07 20:49:02
    首先我们来了解一下redux的几个基本概念: Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store ...redux中间件
  • redux中间件—redux thunk 使用 redux中 action返回的是一个对象数据,redux-thunk中间件可以使其看起来直接返回了function 1. 配置过程 1.1: 安装redux-thunk npm install --save redux-thunk; 1.2: 在...
  • REDUX 中间件

    2020-07-29 15:36:21
    redux的基础使用:用户dispatch一个action,reducer计算出新的state,更新视图。 同步操作:用户发出action,reducer立即计算出state,更新视图。异步操作期望的是:发出action,异步操作结束之后,期望自动执行...
  • 主要介绍了浅谈Redux中间件的实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • redux中间件原理-讲义

    2021-06-11 16:45:06
    1、redux中间件简介 1.1、什么是redux中间件 redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> ...
  • 前言最近几天对 redux 的中间件进行了一番梳理,又看了 redux-saga 的文档,...一、Redux中间件机制Redux本身就提供了非常强大的数据流管理功能,但这并不是它唯一的强大之处,它还提供了利用中间件来扩展自身功能,...
  • 1、redux中间件简介 1.1、什么是redux中间件 redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,230
精华内容 2,892
关键字:

自己写redux中间件