Angular 2                
            угловое сокращение
        
        
            
    Поиск…
основной
app.module.ts
import {appStoreProviders} from "./app.store";
providers : [
  ...
  appStoreProviders,
  ...
]
app.store.ts
import {InjectionToken} from '@angular/core';
import {createStore, Store, compose, StoreEnhancer} from 'redux';
import {AppState, default as reducer} from "../app.reducer";
export const AppStore = new InjectionToken('App.store');
const devtools: StoreEnhancer<AppState> =
    window['devToolsExtension'] ?
    window['devToolsExtension']() : f => f;
export function createAppStore(): Store<AppState> {
  return createStore<AppState>(
    reducer,
    compose(devtools)
  );
}
export const appStoreProviders = [
  {provide: AppStore, useFactory: createAppStore}
];
app.reducer.ts
export interface AppState {
  example : string
}
const rootReducer: Reducer<AppState> = combineReducers<AppState>({
 example : string
});
export default rootReducer;
store.ts
export interface IAppState {
  example?: string;
}
export const INITIAL_STATE: IAppState = {
  example: null,
};
export function rootReducer(state: IAppState = INITIAL_STATE, action: Action): IAppState {
  switch (action.type) {
    case EXAMPLE_CHANGED:
      return Object.assign(state, state, (<UpdateAction>action));
    default:
      return state;
  }
}
actions.ts
import {Action} from "redux";
export const EXAMPLE_CHANGED = 'EXAMPLE CHANGED';
export interface UpdateAction extends Action {
  example: string;
}
Получить текущее состояние
import * as Redux from 'redux';
import {Inject, Injectable} from '@angular/core';
@Injectable()
export class exampleService {
    constructor(@Inject(AppStore) private store: Redux.Store<AppState>) {}
    getExampleState(){
      console.log(this.store.getState().example);
   }
}
изменить состояние
import * as Redux from 'redux';
import {Inject, Injectable} from '@angular/core';
@Injectable()
export class exampleService {
    constructor(@Inject(AppStore) private store: Redux.Store<AppState>) {}
    setExampleState(){
       this.store.dispatch(updateExample("new value"));
   }
}
actions.ts
export interface UpdateExapleAction extends Action {
  example?: string;
}
export const updateExample: ActionCreator<UpdateExapleAction> =
   (newVal) => ({
     type: EXAMPLE_CHANGED,
     example: newVal
});
Добавить редукционный хром-инструмент
app.store.ts
 import {InjectionToken} from '@angular/core';
 import {createStore, Store, compose, StoreEnhancer} from 'redux';
 import {AppState, default as reducer} from "../app.reducer";
    
    
 export const AppStore = new InjectionToken('App.store');
    
const devtools: StoreEnhancer<AppState> =
     window['devToolsExtension'] ?
     window['devToolsExtension']() : f => f;
    
export function createAppStore(): Store<AppState> {
   return createStore<AppState>(
     reducer,
     compose(devtools)
   );
}
    
    export const appStoreProviders = [
      {provide: AppStore, useFactory: createAppStore}
    ];
установить хромовое расширение Redux DevTools
Modified text is an extract of the original Stack Overflow Documentation
        Лицензировано согласно CC BY-SA 3.0
        Не связан с Stack Overflow