如何使用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));

我收到錯誤：

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

但似乎狀態更改未同步到其他選項卡。

Answer 1

不幸的是我沒有讓它在廣播頻道上正常工作（請參閱為什么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);