首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从redux store redux saga测试派生的模拟局部变量

是指在使用redux和redux-saga进行应用开发时,通过测试派生的方式模拟生成局部变量。

在redux中,store是一个全局的状态管理器,用于存储应用的状态。而在某些情况下,我们可能需要在特定的组件或模块中使用局部变量,而不是将其存储在全局的store中。为了实现这一目的,可以使用redux-saga的测试派生功能。

测试派生是redux-saga提供的一种功能,它允许我们在saga中派生一个新的任务,该任务可以独立于全局的store,并且可以拥有自己的局部变量。

具体实现方式如下:

  1. 首先,在redux中定义一个新的reducer,用于管理局部变量的状态。例如:
代码语言:txt
复制
// localReducer.js
const initialState = {
  localVariable: null,
};

const localReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_LOCAL_VARIABLE':
      return {
        ...state,
        localVariable: action.payload,
      };
    default:
      return state;
  }
};

export default localReducer;
  1. 在根reducer中将该reducer与全局的reducer进行合并:
代码语言:txt
复制
// rootReducer.js
import { combineReducers } from 'redux';
import localReducer from './localReducer';

const rootReducer = combineReducers({
  local: localReducer,
  // 其他全局的reducer
});

export default rootReducer;
  1. 在saga中使用测试派生的方式创建一个新的任务,并在该任务中操作局部变量:
代码语言:txt
复制
// saga.js
import { takeEvery, put, select } from 'redux-saga/effects';

function* setLocalVariableSaga(action) {
  const localVariable = yield select((state) => state.local.localVariable);
  // 操作局部变量
  // ...

  yield put({ type: 'SET_LOCAL_VARIABLE', payload: localVariable });
}

function* watchSetLocalVariable() {
  yield takeEvery('SET_LOCAL_VARIABLE_SAGA', setLocalVariableSaga);
}

export default function* rootSaga() {
  yield all([
    // 其他saga任务
    watchSetLocalVariable(),
  ]);
}
  1. 在组件中触发派生任务,并传递需要设置的局部变量:
代码语言:txt
复制
// Component.js
import { useDispatch } from 'react-redux';

const Component = () => {
  const dispatch = useDispatch();

  const handleSetLocalVariable = () => {
    const localVariable = 'example';
    dispatch({ type: 'SET_LOCAL_VARIABLE_SAGA', payload: localVariable });
  };

  // ...

  return (
    <button onClick={handleSetLocalVariable}>Set Local Variable</button>
  );
};

通过以上步骤,我们就可以在redux和redux-saga的应用中实现模拟局部变量的功能。这样,我们可以在特定的组件或模块中使用局部变量,而不会影响全局的store状态。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云云数据库MySQL(CDB)等。你可以通过访问腾讯云官方网站(https://cloud.tencent.com/)获取更多产品信息和文档。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Web技术】639- Web前端单元测试到底要怎么写?

本文从一个真实应用场景出发,设计模式、代码结构来分析单元测试应该包含哪些内容,具体测试用例怎么写,希望看到童鞋都能有所收获。...项目用到技术框架 该项目采用 react 技术栈,用到主要框架包括:react、 redux、 react-reduxredux-actions、 reselect、 redux-saga、 seamless-immutable...这个测试用例步骤就是利用生成器函数一步步产生下一个 effect ,然后断言比较。 从上面的注释 3、4 可以看到, redux-saga 还提供了一些辅助函数来方便处理分支断点。...这也是我选择 redux-saga 原因:强大并且利于测试。 api 和 fetch 工具库 接下来就是api 层相关了。...,这里使用了 redux-mock-store模拟 redux store : import React from 'react'; import { shallow } from 'enzyme

3K30

React saga_react获取子组件ref

---- 最近将项目中redux中间件,redux-thunk替换成了redux-saga,做个笔记总结一下redux-saga使用心得,阅读本文需要了解什么是reduxredux中间件用处是什么...(1)声明式Effect redux-saga中最大特点就是提供了声明式Effect,声明式Effect使得redux-saga监听原始js对象形式action,并且可以方便单元测试,我们一一来看...不需要模拟Api.fetch函数具体返回结果。...相应这里put对应与reduxdispatch,工作流程图如下: 图中可以看出redux-saga执行副作用方法转化action时,put这个Effect方法跟redux原始dispatch...5.总结 通过上述章节,我们可以概括出redux-saga做为redux中间件全部优点: 统一action形式,在redux-saga中,UI中dispatchaction为原始对象 集中处理异步等存在副作用逻辑

4.5K30

前端实现异步几种方式_redux是什么

redux-saga是一个Redux中间件,用来帮你管理程序副作用。或者更直接一点,主要是用来处理异步action。...redux-saga功能也是一样,参见下图: 左边蓝圈圈里就是一堆saga,它们需要和外部进行异步I/O交互,等交互完成后再修改Store状态数据。...redux-saga就是一个帮你管理这堆saga管家,那么它跟其他中间件实现有什么不同呢?它使用了ES6中Generator函数语法。...但是这样的话不好做模拟(mock)测试:我们在测试过程中,一般不会真的执行异步任务,而是替换成一个假函数。实际上,我们只需要确保yield了一个正确函数,并且函数有着正确参数。...提供了一系列API函数来生成Effect对象,比较常用是下面这几个: call:函数调用 select:获取Store数据 put:向Store发送action take:在Store

1.7K30

redux-saga_pub culture

大家好,又见面了,我是你们朋友全栈君。 本文用以记录调研Redux Saga,到应用到项目中一些收获。...通过这个改变,前端应用代码结构更加清晰,业务层可复用部分增加。当然,Saga对自动化测试也支持很好,可以将逻辑单独使用自动化脚本测试,提高项目质量。...安装redux-sage npm install –save redux-sagaredux添加中间件 在定义生成store地方,引入并加入redux-sage中间件。...put方法 put就是reduxdispatch,用来触发reducer更新store 有什么弊端 目前在项目实践中遇到一些问题: redux-saga模型理解和学习需要投入很多精力 因为需要用...而Saga解决问题要更宽泛一些,因为saga只是拦截了action,至于做什么,开发者需要自己来考虑,可以是fetch后端,也可以是更新redux store, 甚至可以执行action带进来callback

1.4K10

Redux原理分析以及使用详解(TS && JS)

用户使用方式非常简单 用户之间没有协作 不需要与服务器大量交互,也没有使用 WebSocket 视图层(View)只单一来源获取数据 组件角度看,如果你应用有以下场景,可以考虑使用 Redux。...从简单 react-thunk 到 redux-promise 再到 redux-saga等等,都代表这各自解决redux异步流管理问题方案 4.1 、redux-thunk redux-thunk...redux-saga将react中同步操作与异步操作区分开来,以便于后期管理与维护 ,redux- saga相当于在Redux原有数据流中多了一层,通过对Action进行监听,从而捕获到监听Action...,然后可以派生一个新任务对state进行维护,通过更改state驱动View变更。...4.4、总结 总来讲Redux Saga适用于对事件操作有细粒度需求场景,同时它也提供了更好测试性,与可维护性,比较适合对异步处理要求高大型项目 。

3.8K30

每日两题 T35

redux-saga redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等) library,它目标是让副作用管理更容易,执行更高效,测试更简单...redux-saga 是一个 redux 中间件,意味着这个线程可以通过正常 redux action 主应用程序启动,暂停和取消,它能访问完整 redux state,也可以 dispatch...redux-saga 使用了 ES6 Generator 功能,让异步流程更易于读取,写入和测试。...redux-saga与其他redux中间件比较 •redux-thunk 缺点在于api层与store耦合,优点是可以获取到各个异步操作时期状态值,比较灵活,易于控制 •redux-promise优点是...api层与store解耦,缺点是对请求失败,请求中情形没有很好处理 •redux-saga 优点是api层与store解耦,对请求中,请求失败都有完善处理,缺点是代码量较大 References

75730

React:几个入门小Demo

应用入口JS:index.js TodoApp 使用 Redux 管理应用状态,index.js作为应用入口,创建了ReduxStore并通过Provider接口将Store扩展到整个应用范围中; #...Redux 管理应用状态 引入 css 模块 UserCURD引入了Saga......AntDesign(蚂蚁金服React UI库) redux-saga 管理异步逻辑 react-router、react-router-redux 管理应用路由 使用了 ES6 decorator...配置Webpack UserCURD 使用 JSON-Server 模拟了一个后台数据服务器,所以需要将与数据处理相关HTTP请求中转到 JSON-Server 服务器上; ? 3.4....总体架构 应用中所有异步逻辑(请求数据、删除数据等)由redux-saga集中管理、应用所有状态变化则由redux集中管理;借助这种结构,我们可以将应用“状态变化”和“异步”这两个概念清晰分离开

2.7K50

Redux + Hooks 工程实践

在处理其他中间件挂载时,特别是那些存在副作用(例如 redux-saga),我们需要对应地实现一个解除挂载 eject 方法。...store 实例 const context = React.useContext(ReactReduxContext); // 为了模拟 constructor 运行时机 const...通过一个 initFlagRef 为 functional 组件模拟构造器生命周期(如果有更好实现方案欢迎指教),因为如果在挂载之后再 inject 的话,会在第一次渲染时取不到对应 store...可复用 Hooks 那我们进一步思考一下,以前我们可能一个页面对应一个 store。通过 Hooks 进行拆分后,我们更方便功能层面去拆分 storestore 逻辑也会更为清晰。...特别适用于逻辑相对复杂工作台场景。(而且我很喜欢 Saga设计思路,能用起来就很爽)。 OK,收。这次以一个简单例子,稍稍展示了一下在 Hooks 大环境下 Redux 与其产生化学反应。

50610

单向数据流-共享状态管理:fluxreduxvuex漫谈异步数据处理

Dispatcher 作用是接收所有的 Action,然后发给所有的 Store。这里 Action 可能是 View 触发,也有可能是其他地方触发,比如测试用例。...redux Redux使用一个对象存储整个应用状态(global state),当global state发生变化时,状态树形结构最顶端往下传递。每一级都会去进行状态比较,从而达到更新。...redux-saga redux-saga是一个Redux中间件,用来帮你管理程序副作用。或者更直接一点,主要是用来处理异步action。...关于saga原理,推举阅读《前端技术栈(三):redux-saga,化异步为同步》 什么是Saga?...redux-saga 把异步获取数据这类操作都叫做副作用(Side  Effect),它目标就是把这些副作用管理好,让他们执行更高效,测试更简单,在处理故障时更容易。

3.6K40

手写Redux-Saga源码

Redux-Saga是一个Redux中间件,所以我们在createStore时候将它引入就行: // store.js import { createStore, applyMiddleware }...Redux-Sagacall这个effect,这样做可以让我们写单元测试变得更简单,为什么会这样,我们后面讲源码时候再来仔细看看。...所以我猜测,他应该是自己实现了一套完全独立异步任务处理机制,下面我们能感知到API入手,一步一步来探寻下他源码奥秘吧。...,这就让我们单元测试好写很多。...但是如果你使用Redux-Sagaeffect,每次你代码运行时候得到都是一个任务描述对象,这个对象是稳定,不受运行结果影响,也就不需要针对这个造测试数据了,大大减少了工作量。

1.7K30

美团前端react面试题汇总

redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...提供了⼤量Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤异步flow易测试...,提供了各种case测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:额外学习成本: redux-saga不仅在使⽤难以理解 generator function,⽽且有数⼗

5.1K30

React之redux学习日志(reduxreact-reduxredux-saga

当我们需要执行一些异步操作时,由于action中只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga是常见两种中间件。   ...redux-saga引入:   修改 store/index.js 文件 import 'babel-polyfill' // es6解析 import { createStore, compose..."redux-saga/effects" // 你可以写一个异步接口或者一个异步函数 import { getUserInfoApi } from '....'@/views/backstage/ArticleManage/store/sagas' // 整合多个模块saga export default function * rootSaga ()...、react-redux基本用法和redux-saga中间件使用,若有错误请各路大佬指出加以改正和学习 智者说话,是因为他们有话要说;愚者说话,则是因为他们想说。

53130
领券