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）中的
ERROR：错误TS2345：类型的参数 'StoreEnhancer <{调度：{}; }，{}>'不可分配给参数类型为“中间件<{}，任意，调度> []”。类型 'StoreEnhancer <{调度：{}; }，{}>'缺少以下内容类型“中间件<{}，任何，调度> []”的属性：弹出，推送，合并，加入以及另外25个。

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

谢谢！

编辑：

我可以这样：

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

但是状态更改似乎未同步到其他标签。

Answer 1

不幸的是，我没有在广播频道上正常工作（请参阅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中间件？

1 个答案: