Как использовать промежуточное программное обеспечение для синхронизации состояний с редуксом и angular-redux? - PullRequest
Новая
       40

Как использовать промежуточное программное обеспечение для синхронизации состояний с редуксом и angular-redux?

0 голосов
/ 14 мая 2019

У меня есть код, в котором я настроил хранилище в конструкторе 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));

Если я пытаюсь добавить промежуточное программное обеспечение для настройки магазина: 

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.

Как я могу использовать синхронизацию состояний при редуксе с angular-redux?

Спасибо!

EDIT:

Я могу сделать так: 

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

но похоже, что изменения состояния не синхронизируются с другими вкладками.

1 Ответ

0 голосов
/ 16 мая 2019

К сожалению, я не смог заставить это работать должным образом на широковещательном канале (см. Почему redux @select не работает, даже если состояние изменяется при использовании 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);
...