redux的中间件的介绍和使用

已于 2023-08-11 00:38:09 修改
阅读量290 收藏 1
点赞数 2
分类专栏： reactjs 文章标签： 中间件 reactjs
于 2023-08-09 09:15:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38441229/article/details/132171876
版权

  • 介绍

Redux中间件是位于派发和归约器之间的扩展点，它可以拦截、处理或修改派发的动作，并且可以对派发的动作进行异步处理。中间件提供了一种灵活的机制，可以在Redux应用中处理各种复杂的业务逻辑和副作用。

  • Redux中常用的中间件有以下几种：

  • Redux Thunk

    • 介绍：Redux Thunk是一个用于处理异步操作的中间件。它允许在动作创建函数中返回一个函数，而不仅仅是一个动作对象。这个返回的函数可以在需要时进行异步操作，例如发起Ajax请求或延迟执行动作。Redux Thunk使得在Redux中处理异步逻辑变得更加简单。
    • 使用：
      • 安装：
      • npm install redux redux-thunk --save

      • 在创建Redux存储（store）之前，需要将Redux Thunk中间件应用到Redux存储中。在创建存储之前，通过applyMiddleware方法将Redux Thunk中间件传递给createStore函数。例如：

        import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

        在上面的示例中，我们将Redux Thunk中间件传递给applyMiddleware函数，然后将其作为第二个参数传递给createStore函数。

      • 现在，你可以创建异步的动作创建函数（action creators）了。异步的动作创建函数可以返回一个函数，而不仅仅是一个动作对象。这个函数可以在需要时进行异步操作，并最终派发一个或多个动作。例如：

        import axios from 'axios';

export const fetchUser = () => {
  return dispatch => {
    dispatch({ type: 'FETCH_USER_REQUEST' });

    axios.get('https://api.example.com/users')
      .then(response => {
        dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_USER_FAILURE', payload: error.message });
      });
  };
};

        在上面的示例中，我们创建了一个fetchUser的异步动作创建函数。它返回一个函数，该函数接收dispatch作为参数。在这个函数中，我们首先派发一个FETCH_USER_REQUEST动作来表示异步操作开始。然后，我们使用axios库发起异步请求，并在请求成功或失败时派发相应的动作。

      • 在组件中使用异步的动作创建函数。你可以在组件中使用connect函数来连接Redux存储，并将异步的动作创建函数映射为组件的属性。例如：

        import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from './actions';

const UserComponent = ({ user, fetchUser }) => {
  useEffect(() => {
    fetchUser();
  }, [fetchUser]);

  if (user.loading) {
    return <div>Loading...</div>;
  }

  if (user.error) {
    return <div>Error: {user.error}</div>;
  }

  return (
    <div>
      <h1>User: {user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    user: state.user
  };
};

export default connect(mapStateToProps, { fetchUser })(UserComponent);

        在上面的示例中，我们使用connect函数将Redux存储中的user状态映射为组件的属性。我们还将fetchUser异步动作创建函数映射为组件的属性。在组件加载时，我们使用useEffect钩子调用fetchUser函数来发起异步操作。

      • 这样，你就可以使用Redux Thunk中间件来处理异步操作了。当调用异步动作创建函数时，Redux Thunk会将函数作为参数传递给dispatch方法，并在适当的时候派发动作。在异步操作完成后，你可以在归约器中处理相应的动作来更新状态。

  • Redux Saga

    • 介绍：Redux Saga是一个用于处理复杂的异步操作和副作用的中间件。它使用了ES6的Generator函数来实现异步流控制。Redux Saga提供了一种声明式的方式来管理副作用，通过监听和响应动作来触发异步操作。它可以用于处理异步请求、定时任务、WebSocket通信等。
    • 使用：

    • 安装：

      npm install redux redux-saga --save

    • 在创建Redux存储（store）之前，需要将Redux Saga中间件应用到Redux存储中。在创建存储之前，通过applyMiddleware方法将Redux Saga中间件传递给createStore函数。例如：

      import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

      在上面的示例中，我们首先创建了一个Redux Saga中间件实例sagaMiddleware。然后，将其作为参数传递给applyMiddleware函数，并将其作为第二个参数传递给createStore函数。最后，我们使用sagaMiddleware.run方法来运行根Saga。

    • 这样，你就可以使用Redux Saga来处理复杂的异步操作和副作用了。当调用Saga函数时，Redux Saga会自动监听相应的动作，并在适当的时候执行相应的处理逻辑。在处理逻辑中，你可以使用Saga提供的效果函数来处理异步操作、派发动作和控制流程。

    • 创建Saga文件。在Redux Saga中，我们需要创建一个或多个Saga文件来处理异步操作和副作用。Saga文件通常包含一个或多个Generator函数，这些Generator函数被称为Saga。例如，我们创建一个名为userSaga.js的Saga文件来处理用户相关的异步操作：

      import { call, put, takeEvery } from 'redux-saga/effects';
import { FETCH_USER_REQUEST, fetchUserSuccess, fetchUserFailure } from './actions';
import api from './api';

function* fetchUser() {
  try {
    const user = yield call(api.fetchUser);
    yield put(fetchUserSuccess(user));
  } catch (error) {
    yield put(fetchUserFailure(error.message));
  }
}

function* userSaga() {
  yield takeEvery(FETCH_USER_REQUEST, fetchUser);
}

export default userSaga;

      在上面的示例中，我们定义了一个fetchUser的Saga函数。在这个Saga函数中，我们使用call效果调用api.fetchUser方法来获取用户数据。然后，使用put效果派发相应的动作，例如fetchUserSuccess或fetchUserFailure。最后，我们定义了一个userSaga根Saga函数，使用takeEvery效果监听FETCH_USER_REQUEST动作，并在收到该动作时调用fetchUser函数。

    • 在根Saga文件中组合Saga。我们需要创建一个根Saga文件，将所有的Saga组合在一起。例如，我们创建一个名为rootSaga.js的根Saga文件：

      import { all } from 'redux-saga/effects';
import userSaga from './userSaga';
import postSaga from './postSaga';

function* rootSaga() {
  yield all([
    userSaga(),
    postSaga(),
  ]);
}

export default rootSaga;

      在上面的示例中，我们使用all效果将多个Saga函数组合在一起，然后将其导出为根Saga函数。

    • 在组件中使用Saga。你可以在组件中使用connect函数来连接Redux存储，并在组件加载时调用Saga函数。例如：

      import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchUserRequest } from './actions';

const UserComponent = ({ user, fetchUserRequest }) => {
  useEffect(() => {
    fetchUserRequest();
  }, [fetchUserRequest]);

  if (user.loading) {
    return <div>Loading...</div>;
  }

  if (user.error) {
    return <div>Error: {user.error}</div>;
  }

  return (
    <div>
      <h1>User: {user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    user: state.user
  };
};

export default connect(mapStateToProps, { fetchUserRequest })(UserComponent);

      在上面的示例中，我们使用connect函数将Redux存储中的user状态映射为组件的属性。我们还将fetchUserRequest动作创建函数映射为组件的属性。在组件加载时，我们使用useEffect钩子调用fetchUserRequest函数来发起异步操作。

  • Redux Observable

    • 介绍：Redux Observable是一个基于RxJS的中间件，用于处理基于事件流的异步操作。它使用Observables来管理异步流，可以处理复杂的异步操作和事件处理逻辑。Redux Observable提供了一种响应式编程的方式来处理副作用，使得在Redux中处理异步操作变得更加灵活和可组合。
    • 使用：

    • 安装：

      npm install redux redux-observable rxjs --save

    • 在创建Redux存储（store）之前，需要将Redux Observable中间件应用到Redux存储中。在创建存储之前，通过applyMiddleware方法将Redux Observable中间件传递给createStore函数。例如：

      import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic } from './epics';
import rootReducer from './reducers';

const epicMiddleware = createEpicMiddleware();
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));

epicMiddleware.run(rootEpic);

      在上面的示例中，我们首先创建了一个Redux Observable中间件实例epicMiddleware。然后，将其作为参数传递给applyMiddleware函数，并将其作为第二个参数传递给createStore函数。最后，我们使用epicMiddleware.run方法来运行根Epic。

    • 创建Epic文件。在Redux Observable中，我们需要创建一个或多个Epic文件来处理异步操作和副作用。Epic是一个函数，它接收一个Observable输入流，处理输入流中的动作，并返回一个输出流，该输出流也是一个Observable。例如，我们创建一个名为userEpic.js的Epic文件来处理用户相关的异步操作：

      import { ofType } from 'redux-observable';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { FETCH_USER_REQUEST, fetchUserSuccess, fetchUserFailure } from './actions';
import api from './api';

export const fetchUserEpic = action$ =>
  action$.pipe(
    ofType(FETCH_USER_REQUEST),
    mergeMap(action =>
      api.fetchUser().pipe(
        map(user => fetchUserSuccess(user)),
        catchError(error => {
          console.error(error);
          return fetchUserFailure(error.message);
        })
      )
    )
  );

      在上面的示例中，我们定义了一个fetchUserEpic函数。在这个函数中，我们使用ofType操作符来过滤输入流中与FETCH_USER_REQUEST动作类型匹配的动作。然后，使用mergeMap操作符来处理输入流中的动作，并通过调用api.fetchUser方法来获取用户数据。通过使用map操作符，我们将获取到的用户数据转换为fetchUserSuccess动作。如果在获取用户数据时出现错误，我们使用catchError操作符来捕获错误，并返回fetchUserFailure动作。

    • 在根Epic文件中组合Epic。我们需要创建一个根Epic文件，将所有的Epic组合在一起。例如，我们创建一个名为rootEpic.js的根Epic文件：

      import { combineEpics } from 'redux-observable';
import { fetchUserEpic } from './userEpic';
import { fetchPostEpic } from './postEpic';

export const rootEpic = combineEpics(fetchUserEpic, fetchPostEpic);

      在上面的示例中，我们使用combineEpics函数将多个Epic函数组合在一起，并将其导出为根Epic函数。

    • 在组件中使用Epic。你可以在组件中使用connect函数来连接Redux存储，并在组件加载时调用Epic函数。例如：

      import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchUserRequest } from './actions';

const UserComponent = ({ user, fetchUserRequest }) => {
  useEffect(() => {
    fetchUserRequest();
  }, [fetchUserRequest]);

  if (user.loading) {
    return <div>Loading...</div>;
  }

  if (user.error) {
    return <div>Error: {user.error}</div>;
  }

  return (
    <div>
      <h1>User: {user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    user: state.user
  };
};

export default connect(mapStateToProps, { fetchUserRequest })(UserComponent);

      在上面的示例中，我们使用connect函数将Redux存储中的user状态映射为组件的属性。我们还将fetchUserRequest动作创建函数映射为组件的属性。在组件加载时，我们使用useEffect钩子调用fetchUserRequest函数来发起异步操作。

    • 这样，你就可以使用Redux Observable来处理复杂的异步操作和副作用了。当调用Epic函数时，Redux Observable会自动监听相应的

  • Redux Promise

    • 介绍：Redux Promise是一个用于处理Promise的中间件。它允许在动作创建函数中返回一个Promise对象，该Promise对象可以用于处理异步操作。当Promise对象被解析时，Redux Promise会派发一个带有解析值的新动作。
    • 使用：

    • 首先，确保你的应用已经安装了redux和redux-promise库。可以使用以下命令进行安装：

      npm install redux redux-promise --save

    • 在创建Redux存储（store）之前，需要将Redux Promise中间件应用到Redux存储中。在创建存储之前，通过applyMiddleware方法将Redux Promise中间件传递给createStore函数。例如：

      import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(promiseMiddleware));

      在上面的示例中，我们通过applyMiddleware方法将Redux Promise中间件传递给createStore函数，以便在创建存储时应用该中间件。

    • 创建Action。在Redux Promise中，我们可以使用Promise对象作为Action的payload。当使用Redux Promise中间件时，它会自动处理Promise对象并根据Promise的状态分发相应的Action。例如，我们创建一个名为fetchUser的Action来获取用户数据：

      export const fetchUser = () => ({
  type: 'FETCH_USER',
  payload: api.fetchUser() // 返回一个Promise对象
});

      在上面的示例中，我们通过调用api.fetchUser方法来获取用户数据，并将返回的Promise对象作为Action的payload。

    • 创建Reducer。在Reducer中，我们可以使用Redux Promise中间件处理Promise对象的状态，并更新状态。例如，我们可以创建一个名为userReducer的Reducer来处理用户数据：

      const initialState = {
  user: null,
  loading: false,
  error: null
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_USER_PENDING':
      return {
        ...state,
        loading: true,
        error: null
      };
    case 'FETCH_USER_FULFILLED':
      return {
        ...state,
        loading: false,
        user: action.payload
      };
    case 'FETCH_USER_REJECTED':
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

      在上面的示例中，我们定义了一个userReducer函数，它根据不同的Action类型更新用户状态。当FETCH_USER_PENDING动作被分发时，我们将loading状态设置为true，并将error状态设置为null。当FETCH_USER_FULFILLED动作被分发时，我们将loading状态设置为false，并将user状态更新为Action的payload。当FETCH_USER_REJECTED动作被分发时，我们将loading状态设置为false，并将error状态更新为Action的payload。

    • 在组件中使用Action。你可以在组件中使用connect函数来连接Redux存储，并在组件中调用Action函数。当Action函数被调用时，Redux Promise中间件会自动处理Promise对象的状态，并分发相应的Action。例如：

      import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from './actions';

const UserComponent = ({ user, fetchUser }) => {
  useEffect(() => {
    fetchUser();
  }, [fetchUser]);

  if (user.loading) {
    return <div>Loading...</div>;
  }

  if (user.error) {
    return <div>Error: {user.error}</div>;
  }

  return (
    <div>
      <h1>User: {user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    user: state.user
  };
};

export default connect(mapStateToProps, { fetchUser })(UserComponent);

      在上面的示例中，我们使用connect函数将Redux存储中的user状态映射为组件的属性。我们还将fetchUserAction创建函数映射为组件的属性。在组件加载时，我们使用useEffect钩子调用fetchUser函数来发起异步操作。

    • 这样，你就可以使用Redux Promise来简化处理异步操作的流程了。当调用Action函数时，Redux Promise中间件会自动处理Promise对象的状态，并根据Promise的状态分发相应的Action。

迷途小员员
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单介绍react redux的中间件的使用
08-27
主要介绍了简单介绍redux的中间件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
redux中间件（redux-thunk、redux-saga）的使用
diwang_718的博客
08-27 684
1、什么是redux的中间件 顾名思义中间件就是谁和谁之间，那么redux中间件中的中间指的是谁呢，其实指的就是action和store，那么action和store之间的桥梁是不是dispatch，所以redux的中间件就是对dispatch的一个封装，之前dispatch接收action的是一个对象，但是使用中间件之后还可以是一个函数，如果你使用了中间件，dispatch接收的是一个对象，它就会直接派发给store，但是如果接收到一个函数的话，dispatch就会先将函数处理完，处理好之后再派发给sto
Redux 中间件
m0_62118859的博客
04-30 3750
目录 1.中间件概述 Redux 中间件作用： 中间件说明： 2.中间件的触发时机 3.redux-logger中间件 4.redux-thunk中间件 1.不使用 redux-thunk 中间件，action 只能是一个对象 2.使用 redux-thunk 中间件后，action 既可以是对象，又可以是函数 5.了解：redux-thunk中间件原理 6.redux-devtools-extension中间件 7.了解：redux 中间件原理 8.理解Redux异步数据流 ..
Redux中间件理解，常见的中间件，实现原理。
比鲁斯大人的博客
08-24 1402
redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。通俗来说，redux中间件就是对dispatch的功能做了扩展。
redux中间件原理-讲义
只会写bug
06-15 727
1、redux中间件简介 1.1、什么是redux中间件 redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。 通俗来说，redux中间件就是对dispatch的功能做了扩展。 先来看一下传统的redux执行流程： 图
【React系列】Redux(二)中间件
最新发布
川峰的博客
01-02 1351
在之前简单的案例中，redux中保存的counter是一个本地定义的数据，我们可以直接通过同步的操作来state就会被立即更新。但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。在之前学习网络请求的时候我们讲过，网络请求可以在class组件的中发送，所以我们可以有这样的结构：HomebannersrecommendsProfilebannersrecommends在reducer.js中添加state初始化数据和reducer中添加。
redux中间件之redux-thunk的具体使用
12-02
redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store....
浅谈Redux中间件的实践
10-18
主要介绍了浅谈Redux中间件的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
眼花缭乱的redux中间件，也不过如此
dear_mRZhou_的博客
07-16 138
在平时的react项目开发中，我们除了会用到redux的基本功能外，还要借助redux的一些中间件（middleware）去完成一些高级的操作，例如使用redux-logger中间件去打印日志，使用redux-thunk去派发一个方法，使用redux-promise去派发一个promise等等。 下面，就让我们一起来看看这几个插件的基本使用，以及实现吧。 首选，我们需要知道redux中间件的一个基本格式，即每一个中间件的基本格式都是如下这样： function loggerMiddleware({ get
Redux Epics 尝试翻译，翻译的不好。
保持学习的态度
11-27 382
Redux Epics 翻译地址： https://pub.dev/packages/redux_epics Redux 非常适合在响应操作下同步更新存储。 但是它没有认知内置异步操作机制，如 api调用 或 数据库响应后检索信息，这就是Epics到来。 最好的部分：Epics是基于Dart流，这使得常规任务十分容易，并且复杂任务如 异步Error处理，取消任务，非常轻而易举的。 说明： 对于不...
说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
weixin_57909742的博客
08-14 365
当派发的 action 是一个函数时，redux-thunk 中间件会将该 action 函数的派发权交给自身处理。其他中间件的实现原理也类似，都是通过拦截 action 并进行相应的处理，然后将最终的 action（或多个 action）传递给下一个中间件或 reducer。中间件的存在让 Redux 的数据流更加灵活，可以处理复杂的异步逻辑并提供更好的代码组织和可测试性。这样可以在返回的函数中进行异步操作，最终派发一个或多个真正的 action 对象到 reducer。
在redux中如何进行异步操作？在redux中如何发送网络请求？
tyxjolin的专栏
04-05 1252
在理解如何在Redux中进行异步操作之前，让我们先了解什么是异步操作。异步操作是指在执行某个任务时，不必等待该任务完成，就可以继续执行下一个任务。在JavaScript中，异步操作通常用来处理网络请求、文件I/O和用户交互等方面。异步操作在Web应用程序中非常常见，因为Web应用程序通常需要与服务器进行交互，而这些交互通常需要一定的时间才能完成。在这种情况下，异步操作使得Web应用程序能够继续响应用户的输入，而不必等待服务器响应完成。
对Redux中间件的理解？常用的中间件有哪些？实现原理？
zz130428的博客
12-08 1059
中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。中间件会判断你当前传进来的数据类型，如果是一个函数，将会给函数传入参数值（dispatch，getState）作用是将所有的中间件组成一个数组，依次执行。如果想要实现一个日志功能，则可以使用现成的。在上面的学习中，我们了解到了。是官网推荐的异步处理中间件。，然后嵌套执行，最后执行。可以看到，中间件内部（
Redux中间件解析
qq_43742385的博客
07-22 441
Redux中间件解析 1. Redux的工作原理 redux对于我们进行全局的状态管理是非常有用的，我们可以省去很多力气去管理组件间的状态传递等等 redux中的核心api和作用 redux解决的真正问题是React组件间的状态共享和状态管理问题，通过以上的6个核心api我们便能管理复杂的状态，并能监听和追溯状态的改动，redux的工作机制如下 当我们要去改变状态的时候，我们会dispatch一个action(一个普通的js对象)，我们最终的状态改变是在reducer中进行的，reducer会根
Redux中间件redux-thunk使用详解
qq_38980678的博客
04-21 1721
redux-thunk主要用于处理reducer无法处理的异步1.什么是异步？同步：就是指前一个任务完成之后在继续执行下一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。异步：每一个任务有一个或多个回调函数（callback），前一个任务结束后，不执行下一个任务，而是执行回调函数，后一个任务不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。2.异步通常会发生在比较复杂的功能使用中axios请求接口数据接口数据返回则为异步。
Redux中间件及中间件的执行原理（redux-thunk）
柯晓楠
03-31 1096
1、Redux-thunk中间件 第一步 安装redux-thunk中间件 npm install redux-thunk 第二步 在store中引入thunk组件 import {createStore,applyMiddleware } from 'redux'; import Reducer from './Reducer'; import thunk from 'redux-thunk'...
React：Redux中间件
Ben_Simons
06-08 568
结合 应用实例与 源码，对 中间件的实现原理进行分析。在此基础上，对“面向切面”这一经典的编程思想建立初步的认识。  在之前介绍 函数时，已经简单地提过中间件——中间件相关的信息将作为 函数的一个 类型的入参被传入。这里简单复习一下 的调用规则，示例代码如下： 可以看到，对外暴露了 这个方法。接受任意个中间件作为入参，而它的返回值将会作为参数传入 ，这就是中间件的引入过程。中间件的引入，会为 工作流带来什么样的改变呢？这里以 为例，从经典的“异步 Action”场景切入，一起看看中间件
前端学习笔记-RxJS与Redux-Observable (一)
KL's Notebook
07-21 1302
文章目录RxJS可观察对象Observable观察者Observers多播的Subjects操作符OperatorsRedux-ObservableEpic 承接前文提到的异步Action话题，中间件redux-thunk易于编写和理解，但它也存在实践上的不足： 你最终可能会回调地狱，特别是在发出API请求时， 需要使用业务逻辑填充回调函数 或reducer函数去整理数据（数据格式不总是完美的，特别是使用第三方API时） 不利于测试（必须使用Spy方法来检查是否使用正确的对象进行dispatch） 然后
redux中间件面试题
09-03
在Redux中，常用的中间件有redux-thunk、redux-saga和redux-logger。redux-thunk的主要作用是可以使action可以变成函数形式，接收两个参数dispatch和getState，可以进行异步操作。redux-saga是一个强大的异步处理库，它使用了ES6的Generator函数来处理异步流程，可以更加清晰和可控地管理副作用。redux-logger的主要作用是在控制台打印输出新老state等信息，方便开发调试。这些中间件在开发过程中可以提高代码的可读性和可维护性，使开发者更方便地处理异步操作和调试程序。此外，react-redux是Redux官方提供的用于配合React的绑定库，它提供了Provider和connect这两个重要的成员，可以更方便地在React组件中使用Redux的状态和操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【面试题】redux及中间件相关面试题&解析](https://blog.csdn.net/Ronychen/article/details/125679270)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [React，Redix面试题](https://blog.csdn.net/qq_48962360/article/details/127098928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值