标签: angular-redux

你好，我正在尝试使用 Angular 来使用 redux。但当我尝试运行我的角度应用程序时，出现此错误消息：

ERROR in node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(10,31): error TS2420: Class 'NgRedux<RootState>' incorrectly implements interface 'ObservableStore<RootState>'.
  Types of property 'dispatch' are incompatible.
    Type 'Dispatch<RootState>' is not assignable to type 'Dispatch<AnyAction>'.
      Type 'RootState' is not assignable to type 'AnyAction'.
node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(37,33): error TS2344: Type 'RootState' does not satisfy the constraint 'Action<any>'.
node_modules/@angular-redux/store/lib/src/components/root-store.d.ts(18,24): error TS2344: Type 'RootState' does not satisfy the constraint 'Action<any>'.
node_modules/redux-observable/index.d.ts(32,56): error TS2344: Type 'S' does not satisfy the constraint 'Dispatch<AnyAction>'.

我的减速机：

export default function reducer(state= {
  persones: [],
  selectedPersone: {}, …

我正在尝试使用angular 6做简单的redux应用程序。

减速器

import { login,logout } from '../actions/actions';
export interface appReducer {
    login:boolean,
    user:String
}
const initialstate:appReducer={
    login:false,
    user:'guest'
}
export function reducer(state=initialstate,action):appReducer {
    switch(action.type) {
        case login:
            return {...state,login:true,user:action.payload}
        case logout:
            return {...state,login:false,user:action.payload}   
    }
    return state;
}

动作

export const login="LOGIN";
export const logout="LOGOUT"

索引

import { reducer,appReducer } from './reducer';
import { ActionReducerMap }  from '@ngrx/store';
interface appState {
    appReducer:appReducer;
}
export const reducers:ActionReducerMap<appState>= {
    appReducer:reducer
}

records.service.ts

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders …

在我的 angular 应用程序中，我使用 angular-redux 进行应用程序状态管理。在我的主模块中，我定义了我的 redux 存储。像这样：

export class MainModule {
  constructor(private ngRedux: NgRedux<MainAppState>,
              private devTools: DevToolsExtension) {
    let enhancers = [];

    if (environment.production === false && devTools.isEnabled()) {
      enhancers = [...enhancers, devTools.enhancer()];
    }

    this.ngRedux.configureStore(
      reducer,
      {} as MainAppState,
      [],
      enhancers);
  }
}

我创建了新的子模块，其中包含一些组件。这些组件应该访问应用程序状态。在这些组件之一中，我通过 @select 访问以进行存储，但这不起作用。这是我访问商店的方式：

export function getLanguage(state: LanguageState) { return state.userLanguage; }

我在我的 ChildComponent 类中有这个代码：

export class ChildComponent implements OnInit {

  @select(getLanguage) savedUserLanguage$: Observable<LanguageState>;

  // more code

}

如何从子模块访问应用程序状态存储？我应该在子模块中导入什么？只为 redux store 处理创建自己的模块会更好吗？也许我忘记了什么？

我使用 Angular v4 和 @angular-redux/store v6。

我仍处于学习 Angular 4 和 Redux 的早期阶段。我有一个从商店获取信息的组件。它在视图中工作正常。但是当我尝试从组件内部访问相同的信息时，我得到的是一个对象而不是值。

这是我的组件：

import { Component } from '@angular/core';
import { NgRedux, select } from 'ng2-redux'; 
import { AppState } from '../../reducers/reducer';
import { QuizService } from '../../services/quiz.service';  
import { clearQuiz } from '../../actions/actions'; 

@Component({ 
    selector: 'quiz', 
    templateUrl: './quiz.component.html', 
    styleUrls: ['./quiz.component.css']
})

export class Quiz {
    constructor(private ngRedux: NgRedux<AppState>, private service: QuizService) {}

    @select('currentQuiz') currentQuiz;
    @select('quizLength') quizLength; 
    @select('sessionId') sessionId; 

    handleClose() {
        console.log("CLOSE", this.sessionId )
        this.service.deleteSession(this.sessionId)
            .subscribe(res => {
                this.ngRedux.dispatch(clearQuiz())
            })
            , error => {
                console.error(error); 
            } …