Angular 6 ngrx - как использовать несколько редукторов с ShopModule.forRoot

Question

Оригинальный пост, расположенный по этой ссылке Dropbox

Благодаря @rijin Переписать код: redurs / index2.ts:

import { ActionReducerMap } from "@ngrx/store";
import { userReducer, UserState } from "./user2.reducer";
import { cartReducer, CartState } from "./cart2.reducer";

interface AppState {
  user: UserState;
  cart: CartState;
}

export const reducers2: ActionReducerMap<AppState> = {
  user: userReducer,
  cart: cartReducer
};

Ошибка компиляции у пользователя: userReducer:

Type '(appUserState: UserState, action: any) => User' is not assignable to type 'ActionReducer<UserState, Action>'.
Property 'user' is missing in type 'User' but required in type 'UserState'.

/ redurs / user.ts:

 export class User {
  uName: string;
  isAdmin: boolean;
  ts: string;
  loggedIn: boolean;
  constructor(data: any) {
    Object.assign(this, data);
  }
}

/ redurs / cart.ts:

export class Cart {
  counter: number;
  constructor(data: any) {
    Object.assign(this, data);
  }
}

/ reducer / user2.reducer.ts:

import * as UserActions from "../actions/user.actions";
import { User } from "./user";

function mTstamp() {
  let d = new Date();
  let mMonth;
  if (d.getMonth() < 10) {
    mMonth = "0" + d.getMonth();
  } else {
    mMonth = d.getMonth();
  }
  let mDate;
  if (d.getDate() < 10) {
    mDate = "0" + d.getDate();
  } else {
    mDate = d.getDate();
  }
  let mHours;
  if (d.getHours() < 10) {
    mHours = "0" + d.getHours();
  } else {
    mHours = d.getHours();
  }
  let mMins;
  if (d.getMinutes() < 10) {
    mMins = "0" + d.getMinutes();
  } else {
    mMins = d.getMinutes();
  }
  let mSecs;
  if (d.getSeconds() < 10) {
    mSecs = "0" + d.getSeconds();
  } else {
    mSecs = d.getSeconds();
  }
  let mTimeStamp =
    d.getFullYear() +
    "-" +
    mMonth +
    "-" +
    mDate +
    " " +
    mHours +
    ":" +
    mMins +
    ":" +
    mSecs;
  console.log("mTimeStamp: ", mTimeStamp);
  return mTimeStamp;
}

export interface UserState {
  user: User;
}

const initialLoginState: UserState = {
  user: new User({
    uName: "Guest",
    isAdmin: false,
    ts: mTstamp(),
    loggedIn: false
  })
};

export function userReducer(appUserState = initialLoginState, action): User {
  switch (action.type) {
    case UserActions.ACTION_LOGOUT:
      return {
        ...appUserState,
        uName: "Guest",
        isAdmin: false,
        ts: mTstamp(),
        loggedIn: false
      };
    case UserActions.ACTION_LOGIN:
      return {
        ...appUserState,
        uName: action.payload,
        isAdmin: action.payload,
        ts: action.payload,
        loggedIn: action.payload
      };
  }
  return appUserState;
}

Ошибка компиляции при возврате appUserState:

Type 'UserState' is missing the following properties from type 'User': uName, isAdmin, ts, loggedIn

/ redurs / cart.reducer.ts:

import * as CartActions from "../actions/cart.actions";
import { Cart } from "./cart";

export interface CartState {
  cart: Cart;
}

const initialCartState: CartState = {
  cart: new Cart({
    counter: 0
  })
};

export function cartReducer(cartState = initialCartState, action): CartState {
  switch (action.type) {
    case CartActions.ACTION_DECREMENT:
      return {
        ...cartState,
        counter: action.payload
      };
    case CartActions.ACTION_INCREMENT:
      return {
        ...cartState,
        counter: action.payload
      };
  }
  return cartState;
}

Ошибка компиляции на счетчике:action.payload:

Type '{ counter: any; cart: Cart; }' is not assignable to type 'CartState'.
Object literal may only specify known properties, and 'counter' does not exist in type 'CartState'.

Извините, но я могу обойти эти ошибки.Пожалуйста, дайте мне знать, что я могу сделать, чтобы решить эти проблемы

Answer 1

Объедините и используйте одну ActionReducerMap для корня.

Каждое состояние должно быть сопоставлено с соответствующим редуктором.

См.url stackblitz: https://stackblitz.com/edit/angular-ngrx-tryout

// cart.reducer

export function cartReducer(cartState = initialCartState, action): CartState {
  console.log('prev state: ', cartState);
  switch (action.type) {
    case CartActionTypes.ACTION_DECREMENT:
      return {
        ...cartState, // no other properties, can be removed
        cart: new Cart({ counter: action.payload.counter })
      };
    case CartActionTypes.ACTION_INCREMENT:
      return {
        ...cartState, // no other properties, can be removed
        cart: new Cart({ counter: action.payload.counter })
      };
  }
  return cartState;
}

export const selectCartState = (state) => state.cartState;
export const selectCart = createSelector(selectCartState, (state) => state.cart);

// store / index.ts

import { ActionReducerMap } from "@ngrx/store";
import { userReducer, UserState } from "./user.reducer";
import { cartReducer, CartState } from "./cart.reducer";

interface AppState {
  userState: UserState;
  cartState: CartState;
}

export const reducers: ActionReducerMap<AppState> = {
  userState: userReducer,
  cartState: cartReducer
};

// и импорт

StoreModule.forRoot(reducers),