Ionic 3 ngrx/store reducer 仅在生产模式下不接收调度操作
Ionic 3 ngrx/store reducers not receiving dispatched actions only in production mode
我有一个 Ionic 3 App,它使用 web sockets 和 redux 使用 ngrx/store。起初,我的所有代码在开发模式下都运行良好。在浏览器和真实设备中。
但是当我尝试在生产模式下构建它时。该操作仍在分派,但 reducer 未收到已分派的操作,导致应用程序的状态未更新。
下面是我的减速器代码。
import { Action } from '@ngrx/store';
const UPDATE_AVATAR = '[Websokcet] New ORDER';
type Type = UpdateAvatar
export class UpdateAvatar implements Action {
readonly type = UPDATE_AVATAR;
constructor(public payload: any) { }
}
export function UpdateAvatarReducer(state: any, action: Type) {
console.log('ACTION RECEIVED:', state, action)
switch (action.type) {
case UPDATE_AVATAR:
return action.payload;
}
}
在我的 rootReducers
import { UpdateAvatar, UpdateAvatarReducer } from './reducers/uploadAvatar';
export function rootReducer () {
return {
reducers: {
driverUpdateProfile: DriverUpdateProfileReducer,
},
}
}
在我的 app.module.ts
import { rootReducer } from '../store/websocket';
// and in the **imports arrays**
StoreModule.forRoot({
...rootReducer().reducers
}),
它在开发模式下有效,但在生产模式下无效。为什么?
如果有人能提供帮助,我们将不胜感激。
提前致谢。
我设法通过改变实现 rootReducer 和 rootActions 的方式来解决问题。我没有导出函数,而是返回了声明的 2 个独立对象。
下面是我的 rootReducer 和 actions
的旧代码
export default function () {
return {
reducers: {
newLocation: NewLocationReducer,
newOrder: NewOrderReducer,
orderTaken: OrderTakenReducer,
driverUpdateProfile: DriverUpdateProfileReducer,
driverUpdateAvatar: UpdateAvatarReducer,
newTransaction: NewTransactionReducer,
updateTransaction: UpdateTransactionReducer,
orderNewMessage: OrderNewMessageReducer,
},
actions: {
newLocation: NewLocation,
newOrder: NewOrder,
orderTaken: OrderTaken,
driverUpdateProfile: DriverUpdateProfile,
driverUpdateAvatar: UpdateAvatar,
newTransaction: NewTransaction,
updateTransaction: UpdateTransaction,
orderNewMessage: OrderNewMessage,
}
}
}
这是下面的新代码:
export const rootActions = {
newLocation: NewLocation,
newOrder: NewOrder,
orderTaken: OrderTaken,
driverUpdateProfile: DriverUpdateProfile,
driverUpdateAvatar: UpdateAvatar,
newTransaction: NewTransaction,
updateTransaction: UpdateTransaction,
orderNewMessage: OrderNewMessage,
}
export const rootReducer = {
newLocation: NewLocationReducer,
newOrder: NewOrderReducer,
orderTaken: OrderTakenReducer,
driverUpdateProfile: DriverUpdateProfileReducer,
driverUpdateAvatar: UpdateAvatarReducer,
newTransaction: NewTransactionReducer,
updateTransaction: UpdateTransactionReducer,
orderNewMessage: OrderNewMessageReducer,
}
我将它们声明为两个独立的变量,我认为它比旧的更有条理。
我有一个 Ionic 3 App,它使用 web sockets 和 redux 使用 ngrx/store。起初,我的所有代码在开发模式下都运行良好。在浏览器和真实设备中。
但是当我尝试在生产模式下构建它时。该操作仍在分派,但 reducer 未收到已分派的操作,导致应用程序的状态未更新。
下面是我的减速器代码。
import { Action } from '@ngrx/store';
const UPDATE_AVATAR = '[Websokcet] New ORDER';
type Type = UpdateAvatar
export class UpdateAvatar implements Action {
readonly type = UPDATE_AVATAR;
constructor(public payload: any) { }
}
export function UpdateAvatarReducer(state: any, action: Type) {
console.log('ACTION RECEIVED:', state, action)
switch (action.type) {
case UPDATE_AVATAR:
return action.payload;
}
}
在我的 rootReducers
import { UpdateAvatar, UpdateAvatarReducer } from './reducers/uploadAvatar';
export function rootReducer () {
return {
reducers: {
driverUpdateProfile: DriverUpdateProfileReducer,
},
}
}
在我的 app.module.ts
import { rootReducer } from '../store/websocket';
// and in the **imports arrays**
StoreModule.forRoot({
...rootReducer().reducers
}),
它在开发模式下有效,但在生产模式下无效。为什么?
如果有人能提供帮助,我们将不胜感激。 提前致谢。
我设法通过改变实现 rootReducer 和 rootActions 的方式来解决问题。我没有导出函数,而是返回了声明的 2 个独立对象。
下面是我的 rootReducer 和 actions
的旧代码export default function () {
return {
reducers: {
newLocation: NewLocationReducer,
newOrder: NewOrderReducer,
orderTaken: OrderTakenReducer,
driverUpdateProfile: DriverUpdateProfileReducer,
driverUpdateAvatar: UpdateAvatarReducer,
newTransaction: NewTransactionReducer,
updateTransaction: UpdateTransactionReducer,
orderNewMessage: OrderNewMessageReducer,
},
actions: {
newLocation: NewLocation,
newOrder: NewOrder,
orderTaken: OrderTaken,
driverUpdateProfile: DriverUpdateProfile,
driverUpdateAvatar: UpdateAvatar,
newTransaction: NewTransaction,
updateTransaction: UpdateTransaction,
orderNewMessage: OrderNewMessage,
}
}
}
这是下面的新代码:
export const rootActions = {
newLocation: NewLocation,
newOrder: NewOrder,
orderTaken: OrderTaken,
driverUpdateProfile: DriverUpdateProfile,
driverUpdateAvatar: UpdateAvatar,
newTransaction: NewTransaction,
updateTransaction: UpdateTransaction,
orderNewMessage: OrderNewMessage,
}
export const rootReducer = {
newLocation: NewLocationReducer,
newOrder: NewOrderReducer,
orderTaken: OrderTakenReducer,
driverUpdateProfile: DriverUpdateProfileReducer,
driverUpdateAvatar: UpdateAvatarReducer,
newTransaction: NewTransactionReducer,
updateTransaction: UpdateTransactionReducer,
orderNewMessage: OrderNewMessageReducer,
}
我将它们声明为两个独立的变量,我认为它比旧的更有条理。