如何在 angular-redux 中使用 redux-state-sync 中间件？

Question

我有现有代码，我在 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));

我收到错误：

ERROR in src/app/app.module.ts(51,56): error TS2345: Argument of type 'StoreEnhancer<{ dispatch: {}; }, {}>' is not assignable to parameter of type 'Middleware<{}, any, Dispatch>[]'. Type 'StoreEnhancer<{ dispatch: {}; }, {}>' is missing the following properties from type 'Middleware<{}, any, Dispatch>[]': pop, push, concat, join, and 25 more.

如何将 redux-state-sync 与 angular-redux 一起使用？

谢谢！

编辑：

我可以这样做：

const config = {
  blacklist: ['TOGGLE_TODO'],
}
const middlewares : Middleware[] = [
  createStateSyncMiddleware(config),
];
ngRedux.configureStore(rootReducer, INITIAL_STATE, middlewares);

但状态更改似乎未同步到其他选项卡。

Answer 1

不幸的是，我没有让它在 broadcast-channel 上正常工作（请参阅 Why redux @select does not work even though the state is changed when using redux-state-sync?）所以这里是本地存储。

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

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);

如何在 angular-redux 中使用 redux-state-sync 中间件？

How to use redux-state-sync middleware with angular-redux?

angular

redux

angular-redux