0

我有现有代码，我在 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<{}, any, Dispatch>[]' 的以下属性：pop、push、concat、join 等 25 个。

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

谢谢！

编辑：

我可以这样做：

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

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

4

1 回答 1

0

不幸的是，我没有让它在广播频道上正常工作（请参阅Why redux @select doesn't 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);
  }
 }

存储/索引.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);
于 2019-05-16T05:50:10.593 回答