Redux中间件与异步操作

glumes 发布于2019-08-20 18:18 / 871人阅读

摘要：基本流程创建带有三个方法发出处理数据每次后的数据即得到的数据即一个新的所以是一个对象每次都是上次返回的值所以用即返回的新状态新的即本次的返回值所以每次都是往空的对象里先推再新增属性或改变原来属性的值层通过方法设置监听函数一旦发生变化就会

基本流程

1.创建store,带有三个方法:store.dispatch,store.subscribe,store.getState

import { applyMiddleware ,createStore } from "redux";
const store = createStore(
    reducer,
    applyMiddleware(thunk, logger)
);

2.view发出dispatch->action

del = () => {
    store.dispatch({
        type: "DEL",
        data: this.state.count - 1
    });
}

3.reducer处理action数据
每次dispatch后return的数据即store.getState()得到的数据,即一个新的state.
所以state是一个对象,每次都是上次返回的值.
所以用Object.assign({}, state, {count: action.data})

export default (state = {}, action) => {
    switch (action.type) {  // state即返回的新状态,新的state即本次的返回值,所以每次都是往空的对象里,先推state,再新增属性或改变原来属性的值
        case "ADD":
            return Object.assign({}, state, {count: action.data});
        case "ADD2":
            return Object.assign({}, state, {count: action.data});
        case "ADD3":
            return Object.assign({}, state, {count: action.data});  
        case "DEL":
            return Object.assign({}, state, {count: action.data});
        case "AJAX":
            return Object.assign({}, state, {res: action.data.res});
        default:
            return {
                count: 0,
                res: "aaaa"
            };
    }
}

4.view层通过store.subscribe()方法设置监听函数,一旦state发生变化,就会自定执行这个函数.
在这个函数里setState,就会触发整个组件的render.

store.subscribe(() => { // subscribe即,每一次dispatch,都会触发reducer处理数据,即触发store.subscribe
    this.setState({
        count: store.getState().count,  // reducer返回新的state,即state的值被改变state = 1
        res: store.getState().res
    });
});

异步操作

1.用户发出Action,Reducer函数算出新的State,View重新渲染.
2.异步操作怎么办? Action发出以后,Reducer立即算出State,这叫做同步;Action发出以后,过一段时间再执行Reducer,这就是异步.
怎样才能Reducer在异步操作结束后自动执行呢?这就要用到新的工具:中国件(middleware)
3.中间件
只有发送Action的这个步骤,即store.dispatch()方法,可以添加功能.
可以对store.dispatch进行如下改造.

let next = store.dispatch;

store.dispatch = function dispatchAndLog(action) {
    console.log("dispatching", action);
    next(action);
    console.log("next state", store.getState());
}

上面代码中,对store.dispatch进行了重定义,在发送Action前后添加了打印功能,这就是中间件的雏形.
中间件就是一个函数,对store.dispatch方法进行了改造,在发出Action和执行Reducer这两步之间,添加了其他功能.
4.中间件的用法
redux-logger提供一个生成器createLogger,可以生成日志中间件logger,然后,将它放在applyMiddleware方法中,
传入createStore方法,就完成了store.dispatch()的功能增强.

import { applyMiddleware ,createStore } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";

const logger = createLogger();

const store = createStore(
    reducer,
    applyMiddleware(thunk, logger)
);

5.applyMiddleware
applyMiddleware是Redux的原生方法,作用是将所有中间件组成一个数组,依次执行.
6.异步操作的基本思路
操作开始时,送出一个Action,触发State更新为"正在操作"状态,重新渲染.
操作结束后,再送出一个Action,触发State更新为"操作结束",view再一次重新渲染.

redux-thunk中间件

1.异步操作至少要送出两个Action,用户触发第一个Action,这个跟同步操作一样,没有问题.
如何才能在操作结束时,系统自动送出第二个Action呢?

add3 = () => {
    store.dispatch(dispatchAction(this.state.count + 3));
}
function dispatchAction(count) {
    return (dispatch) => {
        dispatch({
            type: "ADD3",
            data: count
        });
    }
}

dispatchAction是一个Action Creater,返回一个函数,这个函数执行后,发出一个action,然后执行异步操作,拿到结果后,再次dispatch,发出一个Action.
dispatchAction返回了一个函数,而普通的action creator默认返回一个对象.
返回的函数的参数是dispatch和getState这两个redux方法.
action是由store.dispatch方法发送的,而store.dispatch方法正常情况下,参数只能是对象,不能是函数.
这时,就使用redux-thunk中间件,改造dispatch,使得后者可以接受函数作为参数.

使用redux-thunk发Async Action的例子

1.首先,这是个关于action creator的解释.
什么是action creator? 返回action的函数.
为什么要用action creator?图个方便吧.

function changeNum(count) {
    return {
        type: "ADD2",
        data: count
    }
}
add2 = () => {
    store.dispatch(changeNum(this.state.count + 2));
}

2.Thunk的做法就是扩展了这个action creator.
Thunk允许action creator返回一个函数,而且这个函数第一个参数是dispatch.
所以不光改造action creator,如果你要用thunk,你还要把它放进middleware里去,这样函数类型的action就被thunk middleware捕获,
根据你的函数逻辑,再去dispatch常规的action.
这样Async Action其实就是发Ajax之前dispatch一发,收到服务器响应后dispatch一发,
报错的话再来dispatch一发.

专线服务服务器托管 js中的异步操作同步与异步异步通信与同步通信异步与非阻塞

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

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

Redux中间件与异步Action

摘要：中间件对异步的实现非常重要，因为在之前的文章中我们谈到，是一个行为抽象，只是一个对象，是一个纯函数，不应该有调用和副作用的操作。这个函数并不需要保持纯净，它还可以带有副作用，包括执行异步请求。那么如何在中进行网络请求标准的做法是使用。在之前的浅谈Flux架构及Redux实践一文中我们初步的谈及了Redux的数据流思想，并做了一个简单的加减器。但是还没有接触到Redux更多常用的场景，...

paney129 2019-08-20 10:35 评论0 收藏0
Redux 进阶 - react 全家桶学习笔记（二）

摘要：在函数式编程中，异步操作修改全局变量等与函数外部环境发生的交互叫做副作用通常认为这些操作是邪恶肮脏的，并且也是导致的源头。注：这篇是17年1月的文章，搬运自本人 blog... https://github.com/BuptStEve/... 零、前言在上一篇中介绍了 Redux 的各项基础 api。接着一步一步地介绍如何与 React 进行结合，并从引入过程中遇到的各个痛点引出 ...

Godtoy 2019-08-23 10:58 评论0 收藏0
React专题：react，redux以及react-redux常见一些面试题

摘要：我们可以为元素添加属性然后在回调函数中接受该元素在树中的句柄，该值会作为回调函数的第一个参数返回。使用最常见的用法就是传入一个对象。单向数据流，比较有序，有便于管理，它随着视图库的开发而被概念化。面试中问框架，经常会问到一些原理性的东西，明明一直在用，也知道怎么用，但面试时却答不上来，也是挺尴尬的，就干脆把react相关的问题查了下资料，再按自己的理解整理了下这些答案。 reac...

darcrand 2019-08-23 13:41 评论0 收藏0
精益 React 学习指南（Lean React）- 3.4 掌控 redux 异步

摘要：举例来说一个异步的请求场景，可以如下实现任何异步的逻辑都可以，如等等也可以使用的和。实际上在中，一个就是一个函数。书籍完整目录 3.4 redux 异步 showImg(https://segmentfault.com/img/bVyou8); 在大多数的前端业务场景中，需要和后端产生异步交互，在本节中，将详细讲解 redux 中的异步方案以及一些异步第三方组件，内容有： redu...

JouyPub 2019-08-19 18:36 评论0 收藏0
企业级后台react-redux异步操作实践

摘要：一种通知请求成功的。对于这种，可能会把接收到的新数据合并到中，并重置。另外，有些会保存这些失败信息，并在里显示出来。一、redux基础 redux 通过 dispatch(action) -> 中间件 -> reducer处理数据 -> 改变store -> 使用subscribe()监听store改变更新视图的方式管理状态将所有状态存储在一个store对象里面 reducer...

duan199226 2019-08-26 12:11 评论0 收藏0