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

在@angular-redux/store configureStore 9版本中正确注册epics

在@angular-redux/store configureStore 9版本中正确注册epics,需要按照以下步骤进行操作:

  1. 首先,确保已经安装了@angular-redux/store和redux-observable这两个依赖包。可以使用以下命令进行安装:npm install @angular-redux/store redux-observable
  2. 在应用的根模块中(通常是AppModule),导入NgReduxModuleEpicMiddleware:import { NgReduxModule, NgRedux } from '@angular-redux/store'; import { createEpicMiddleware } from 'redux-observable';
  3. 创建一个名为rootEpic的根epic。epic是一个接收action流并返回新的action流的函数。可以根据具体需求编写自定义的epic。以下是一个示例:import { ActionsObservable, ofType } from 'redux-observable'; import { mapTo } from 'rxjs/operators';

const rootEpic = (action$: ActionsObservable<any>) =>

代码语言:txt
复制
 action$.pipe(
代码语言:txt
复制
   ofType('SOME_ACTION_TYPE'),
代码语言:txt
复制
   mapTo({ type: 'ANOTHER_ACTION_TYPE' })
代码语言:txt
复制
 );
代码语言:txt
复制
  1. 在根模块的providers数组中,添加以下代码来配置epic中间件:import { createEpicMiddleware } from 'redux-observable'; import { rootEpic } from './path/to/rootEpic';

const epicMiddleware = createEpicMiddleware();

@NgModule({

代码语言:txt
复制
 imports: [
代码语言:txt
复制
   NgReduxModule
代码语言:txt
复制
 ],
代码语言:txt
复制
 providers: [
代码语言:txt
复制
   {
代码语言:txt
复制
     provide: NgRedux,
代码语言:txt
复制
     useFactory: configureStore,
代码语言:txt
复制
     deps: [epicMiddleware]
代码语言:txt
复制
   },
代码语言:txt
复制
   {
代码语言:txt
复制
     provide: epicMiddleware,
代码语言:txt
复制
     useFactory: createEpicMiddleware,
代码语言:txt
复制
   },
代码语言:txt
复制
   {
代码语言:txt
复制
     provide: rootEpic,
代码语言:txt
复制
     useValue: rootEpic,
代码语言:txt
复制
   }
代码语言:txt
复制
 ]

})

export class AppModule { }

代码语言:txt
复制
  1. 在根模块的configureStore函数中,将epicMiddleware作为参数传递给NgRedux的configureStore方法,并在调用configureStore方法时将rootEpic传递给epics参数:import { NgRedux } from '@angular-redux/store'; import { rootReducer } from './path/to/rootReducer'; import { rootEpic } from './path/to/rootEpic';

export function configureStore(ngRedux: NgRedux<any>, epicMiddleware: EpicMiddleware<any>) {

代码语言:txt
复制
 ngRedux.configureStore(rootReducer, {}, [epicMiddleware]);
代码语言:txt
复制
 epicMiddleware.run(rootEpic);

}

代码语言:txt
复制
  1. 现在,您已经成功注册了epics。可以在组件中使用NgRedux的dispatch方法来触发epics中定义的action。例如:import { NgRedux } from '@angular-redux/store';

constructor(private ngRedux: NgRedux<any>) {}

someMethod() {

代码语言:txt
复制
 this.ngRedux.dispatch({ type: 'SOME_ACTION_TYPE' });

}

代码语言:txt
复制

请注意,以上步骤是基于@angular-redux/store 9版本的配置。具体版本可能会有所不同,因此请根据您使用的版本进行相应的调整。

关于@angular-redux/store和redux-observable的更多信息和使用示例,您可以参考腾讯云提供的相关文档和示例代码:

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

相关·内容

RxJS & React-Observables 硬核入门指南

*/ 输出,可以注意到第二个Observer从1开始打印,尽管它在5秒后订阅了。...Observer 2: 9 Observer 1: 10 Observer 2: 10 */ 输出,可以注意到第二个Observer从5开始打印,而不是从1开始。...Epics 还有很多更有用的操作符。你可以RxJS官方文档中看到完整的操作符列表和示例。 了解所有常用的操作符是至关重要的。...epics文件夹创建一个新的文件index.js,并使用combineEpics函数合并所有的epics来创建根epic。然后导出根epic。...毕竟,使用它的好处直接与应用程序的复杂性成正比,这从上面提到的实际用例是显而易见的。 我坚信使用正确的库集将帮助我们开发更干净和可维护的应用程序,并且从长远来看,使用它们的好处将超过缺点。

6.9K50

React项目的服务端渲染改造(koa2+webpack3.11)

注意点:使用框架前一定确认当前webpack版本为3.x Node为8.x以上,读者最好用React3个月以上,并有实际React项目经验 项目目录介绍 ├── assets │ └── index.css...先大致看一下Route组件的几个配置项,值得注意的是其中的thunk属性,这是实现后端获取数据后渲染的关键一步,正是这个属性实现了类似Next里面的组件提前获取数据的生命周期钩子,其余的属性都可以相关...这个渲染的具体思路是:服务端判断路由的thunk方法,如果存在则需要执行这个获取数据逻辑,这是个阻塞过程,可以当作同步,获取后放到全局State,在前端输出的HTML中注入window....props传来的action触发函数,但在action内部进行一层逻辑判断,避免重复的请求,实际项目中请求数据往往会有个标识性ID,就可以将这个ID存入store,然后就可以进行一次对比校验来提前返回...,避免重复发送ajax请求,具体可看store/actions/home.js`的逻辑处理。

1.3K70

用 Redux 做状态管理,真的很简单🦆!

Store(存储) 单一数据源使得同构应用开发变得容易,将状态统一的 对象树 维护管理也会更加容易!...(4) 纯函数更新 state 纯函数: 相同的输入,总是会得到相同的输出,并且执行过程没有任何副作用的函数。...的创建 所有的状态都放在了 Store ,因此需要一个统一的地方来管理,以一个计数器为例, ...."; // store/index.ts 声明的类型 // 借助 createSlice 创建 reducer、action const CounterSlice = createSlice({...三、扩展知识 3.1 @redux/toolkit API 在上述的实际案例,用到了如下 API: configureStore(): 简化 Store 的创建,默认创建了执行异步的中间件,自动启用

3.4K40

9. redux如何精简代码

,那么这样的action如何解析呢,这就要使用中间件了,前文说了,redux里都是函数式的,这就可以让我们传递过程做处理了,其实可以理解为类似java spring的AOP,servlet的拦截器...创建store的时候链接我们自己的中间件,修改app/store.js如下 applyMiddleware(thunk, logger, callAPIMiddleware) 最后reducer我没有更改...真正的 Flux 模版是概念性的:发送更新的需求,用 Dispatcher 注册 Store 的需求,Store 是对象的需求 (当你想要一个哪都能跑的 App 的时候复杂度会提升)。...组件内部调用的的方式没有任何改变,这也是redux的强大之处。 给个效果图 ?...} from 'redux-persist'; ... function configureStore(onComplete: ?

1.1K50

Hot Reload 究竟是怎么实现的?

因为 HMR 模块更新有冒泡机制,未经accept处理的更新事件会沿依赖链反向传递,所以组件树顶层能够监听到树中所有组件的变化,此时重新创建整棵组件树,过程取到的都是已经更新完成的组件,渲染出来即可得到新的视图...针对视图的局部刷新免去了整个刷新之后再次回到先前状态所需的繁琐操作,从而真正提升开发效率 然而,局部刷新要求对组件(甚至组件的一部分)进行热替换,这在实现上存在不小的挑战(包括如何保障正确性、缩小影响范围...特殊地,对于 Redux 应用而言,有必要让 Reducer 的变化也能热生效(因为大多数状态都交由 Redux 来管理了): // configureStore.js import { createStore.../reducers'; export default function configureStore(initialState) { const store = createStore(.../reducers/index').default; store.replaceReducer(nextRootReducer); }); } return store;

1.7K20

年轻时,我不写单元测试

一个多人协作的大型项目中,我们开发的过程可能经常会面临到这样的问题: 哎,这次我没有改动到这里啊,这怎么会有bug呢 哎,怎么新加了个功能原来的功能受影响了呢 哎,这里的样式为什么乱掉了 当我们被提出这些...按照我们的理想情况,如果我们的测试用例覆盖率达到了5个9以上,那应该是可以直接发布了,但是这个时候其实我们的内心还是会有一些疑虑,就是,那一个一个的模块都已经通过了,那集成在一起会不会有问题呢?.../__mocks__/appInfo.js' import { Provider } from 'react-redux'; import configureStore from '@/entries/...; let wrapper; beforeEach(() => { moxios.install(instance); store = configureStore(initialStore...app/get', { status: 200, responseText: 'success' }); // 点击下拉框的第一个

85820

谈谈 React 5种最流行的状态管理库

本文中,我将一一介绍如何在 React App 中使用 5 种最流行的库/APIS(使用最现代和最新版本的库)如何在 React App程序中使用全局状态管理,并且达到一样的效果。...相反,最小状态集存储 atoms 。...使用 Recoil selectors,你可以根据 state 计算派生属性,例如,可能是已过滤的待办事项数组(todo app )或已发货的订单数组(电子商务应用程序): import { selector...MobX React 现在有一个轻量级版本(MobX React Lite),这个版本专门针对函数组件而诞生,它的有点是速度更快,更小。...= configureStore({ reducer: reducers }) function Main() { return ( /* 在这里,我们使用app的reducer来创建

2.6K20

分布式日志收集系统: Facebook Scribe之结构及源码分析

存储配置详解 (1)       启动代码详解说明了存储信息的配置是通过configureStore和configureStoreCategory着两个函数实现的; (2)      ...configureStore函数根据传递进来的StoreConf对象存放的配置信息,解析出此store存放哪个(参数名称category:单个分类)或哪几个(参数名称categories:多个分类mutil...(2)       StoreQueue构造函数中用初始化列表初始化了各个配置变量,然后调用Store的全局createStore函数创建一个Store对象(后面详解Store模块功能),最后调用storeInitCommon...Store以及各个继承子类代码详解 (1)       store类:函数createStore根据存储类型创建相应的子类对象,其他的实现的方法都很简单,一句话的事,一看就明白,具体处理消息的方法相应的子类实现...9.

1.1K20

前端测试体系建设与最佳实践总结

单元测试:是指对软件的最小可测试单元进行检查和验证,通常指的是独立测试单个函数。 UI 测试:是对图形交互界面的测试。 集成测试:就是测试应用不同模块如何集成,如何一起工作,这和它的名字一致。.../actions/__tests__/cart.test.js import configureStore from 'redux-mock-store'; import Immutable from.../asyncActions/__tests__/shop.test.js import configureStore from 'redux-mock-store'; import thunk from...我们的测试点在加菜和减菜按钮的事件是否被正确触发,当数量为 0 时,减号按钮和数量是否展示,数量不为 0 时,展示是否正确。...原有逻辑增加新功能时,通过运行之前的测试,能够大大提高迭代的质量和稳定性。 这篇文章主要总结了笔者 React 项目中书写测试的经验与沉淀,而对于 Vue 的项目,暂时还没有深入研究。

5.3K30

如何在 React 应用中使用 Hooks、Redux 等管理状态

更新状态后读取状态的正确方法是使用 useEffect hook。它允许我们每个组件重新渲染后(默认情况下)或在我们声明更改的任何特定变量之后执行一个函数。... Redux store 是拥有所有应用程序状态信息的实体。多亏 Redux,我们能够从任何想要的组件访问 store(就像使用 context 一样)。...store ,我们从 Redux toolkit 中导入 configureStore 函数,通过调用此函数来创建 store,并将一个带有 reducer 的对象传递给它,该对象本身就是一个包含...使用 store 的方式与 Redux 类似,但不同之处在于, Zusand store 是一个 hook,它需要的模板要少得多。...Redux 是最成熟和使用最广泛的库,它附带大量文档、在线社区以及每个新版本中发现和解决的以前错误。 它的坏处是,作为开发者,它给我们带来了一些我们必须学习和思考的新概念。

8.4K20
领券