[英]@angular-redux/store : How to write unit test for the redux store?
[英]How to use redux-state-sync middleware with angular-redux?
我有现有的代码,我在AppModule构造函数中配置了商店:
export class AppModule {
constructor(ngRedux: NgRedux<IApplicationState>) {
// Tell @angular-redux/store about our rootReducer and our initial state.
// It will use this to create a redux store for us and wire up all the
// events.
ngRedux.configureStore(rootReducer, INITIAL_STATE);
}
这几乎就是文档告诉我们使用它的方式。
现在我正在尝试使用redux-state-sync与我的商店。 但是,redux-state-sync文档的示例指示我使用createStore而不是configureStore:
import { createStore, applyMiddleware } from 'redux'
import { createStateSyncMiddleware } from 'redux-state-sync';
const config = {
// TOGGLE_TODO will not be triggered in other tabs
blacklist: ['TOGGLE_TODO'],
}
const middlewares = [
createStateSyncMiddleware(config),
];
const store = createStore(rootReducer, {}, applyMiddleware(...middlewares));
如果我尝试将中间件添加到configureStore:
ngRedux.configureStore(rootReducer, INITIAL_STATE, applyMiddleware(...middlewares));
我收到错误:
src / app / app.module.ts(51,56)中的错误:错误TS2345:类型'StoreEnhancer <{dispatch:{};的参数 },{}>'不能分配给'Middleware <{}类型的参数,any,Dispatch> []'。 输入'StoreEnhancer <{dispatch:{}; },{}>'缺少类型'Middleware <{}中的以下属性,任何,Dispatch> []':pop,push,concat,join等等。
如何在angular-redux中使用redux-state-sync?
谢谢!
编辑:
我可以这样做:
const config = {
blacklist: ['TOGGLE_TODO'],
}
const middlewares : Middleware[] = [
createStateSyncMiddleware(config),
];
ngRedux.configureStore(rootReducer, INITIAL_STATE, middlewares);
但似乎状态更改未同步到其他选项卡。
不幸的是我没有让它在广播频道上正常工作(请参阅为什么redux @select在使用redux-state-sync时改变状态不起作用? )所以这里是localstorage。
app.module.ts
import { createStateSyncMiddleware, initStateWithPrevTab } from 'redux-state-sync';
import { Store, createStore, applyMiddleware } from 'redux';
export const store: Store<IApplicationState> = createStore(
rootReducer,
applyMiddleware(createStateSyncMiddleware({ broadcastChannelOption: { type: 'localstorage' } })
);
export class AppModule {
constructor(ngRedux: NgRedux<any>) {
initStateWithPrevTab(store);
ngRedux.provideStore(store);
}
}
存储/ index.ts
import { combineReducers } from 'redux'
import { ILoginState, loginReducer } from './login'
import { withReduxStateSync } from 'redux-state-sync'
export interface IApplicationState {
login: ILoginState;
}
export const INITIAL_STATE : IApplicationState = {
login : { isLoggedIn: false, tokenInfo : null }
}
const appReducer = combineReducers<IApplicationState>({
login: loginReducer
})
export const rootReducer = withReduxStateSync(appReducer);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.