Question

我正在尝试在angular 7中设置redux。我已经看过大多数教程，但是其中大多数教程都是直接注入redux而不是模块化方法。我是Angle 7的新手。

到目前为止，我所做的是：我的store / module.ts

import { NgModule } from '@angular/core';
import { NgReduxModule, NgRedux, DevToolsExtension } from '@angular-redux/store';
import { IAppState } from '@/_models'
import { rootReducer } from './reducers';

@NgModule({
  imports: [NgReduxModule, ],
  
})
export class StoreModule {
  constructor(
    public store: NgRedux<IAppState>,
    devTools: DevToolsExtension,
  ) {
      store.configureStore(
        rootReducer,
        {},
        devTools.isEnabled() ? [ devTools.enhancer() ] : []);
  }
}

错误发生在根减速器行上

类型'Reducer <{userReducer：IUser; }，无法将AnyAction>'分配给类型为'Reducer'的参数。参数“状态”和“状态”的类型不兼容。

我的reducer.ts：

import { combineReducers } from 'redux';
import { userReducer } from '@/_reducers'

export const rootReducer = combineReducers({
  userReducer,
});

我的user.ts：

export interface IUser {
  id: number;
  username: string;
  password: string;
  firstName: string;
  lastName: string;
  token: string;
}

我的用户减速器：

import { UserActions } from '@/_actions';
import { Action } from 'redux';
import { IUser } from '@/_models'

const INITIAL_STATE: IUser = {
  id: 0,
  username: '',
  password: '',
  firstName: '',
  lastName: '',
  token: '',
};

export function userReducer(state: IUser = INITIAL_STATE, action: Action) {
    switch (action.type) {
      case UserActions.SET_USER_ID:
        return {
          ...state,
          id: 1,
        };
    }
    return state;
}

我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { routing } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { StoreModule } from '@/store'
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    routing,
    FormsModule,
    ReactiveFormsModule,
    StoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

对于有经验的7位专家来说，这可能是微不足道的，但是可以提供任何帮助。我想念什么？请注意，我想单独存放商店模块。

在角度7中设置Redux

0 个答案: