[英]How to use redux-state-sync middleware with angular-redux?
I have existing code where I have configured the store in AppModule constructor: 我有现有的代码,我在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);
}
This is pretty much how the documentation tells to use it. 这几乎就是文档告诉我们使用它的方式。
Now I'm trying to use redux-state-sync with my store. 现在我正在尝试使用redux-state-sync与我的商店。 However the redux-state-sync documentation's example instructs me to use createStore instead of configureStore: 但是,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));
If I try to add the middleware to configureStore: 如果我尝试将中间件添加到configureStore:
ngRedux.configureStore(rootReducer, INITIAL_STATE, applyMiddleware(...middlewares));
I get error: 我收到错误:
ERROR in src/app/app.module.ts(51,56): error TS2345: Argument of type 'StoreEnhancer<{ dispatch: {}; src / app / app.module.ts(51,56)中的错误:错误TS2345:类型'StoreEnhancer <{dispatch:{};的参数 }, {}>' is not assignable to parameter of type 'Middleware<{}, any, Dispatch>[]'. },{}>'不能分配给'Middleware <{}类型的参数,any,Dispatch> []'。 Type 'StoreEnhancer<{ dispatch: {}; 输入'StoreEnhancer <{dispatch:{}; }, {}>' is missing the following properties from type 'Middleware<{}, any, Dispatch>[]': pop, push, concat, join, and 25 more. },{}>'缺少类型'Middleware <{}中的以下属性,任何,Dispatch> []':pop,push,concat,join等等。
How can I use redux-state-sync with angular-redux? 如何在angular-redux中使用redux-state-sync?
Thanks! 谢谢!
EDIT: 编辑:
I can do like this: 我可以这样做:
const config = {
blacklist: ['TOGGLE_TODO'],
}
const middlewares : Middleware[] = [
createStateSyncMiddleware(config),
];
ngRedux.configureStore(rootReducer, INITIAL_STATE, middlewares);
but it seems like the state changes are not synced to other tabs. 但似乎状态更改未同步到其他选项卡。
Unfortunately I didn't get this to work properly on broadcast-channel (see Why redux @select does not work even though the state is changed when using redux-state-sync? ) so here it is with localstorage. 不幸的是我没有让它在广播频道上正常工作(请参阅为什么redux @select在使用redux-state-sync时改变状态不起作用? )所以这里是localstorage。
app.module.ts 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);
}
}
store/index.ts 存储/ 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.