NgRx 通过 dispatch 方法传递 payload 来更新 store
NgRx pass payload through dispatch method to update store
我刚开始学习 ngRx。我正在尝试创建一个商店,该商店将通过组件的操作进行更新。我正在使用 NgRx 创建方法来创建操作和缩减器。
request.Component.ts
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Request } from '../models/request.model';
import { RequestState } from '../reducers/request.reducer';
import { Observable } from 'rxjs';
import { UpdateRequest , LoadAllRequests, DeleteRequest } from '../actions/request.actions';
@Component({
selector: 'app-request',
templateUrl: './request.component.html',
styleUrls: ['./request.component.css'],
})
export class RequestComponent {
request$: Observable<RequestState>;
requestList = Request[2] = [
{ RequestId : '1', Name : 'Test1'},
{ RequestId : '2', Name : 'Test2'},
{ RequestId : '3', Name : 'Test3'}
];
constructor(private store: Store<{ request: RequestState }>) {
this.request$ = store.pipe(select('request'));
}
UpdateRequest() {
this.store.dispatch(UpdateRequest({request : this.requestList[0]}));
}
LoadRequests() {
this.store.dispatch(LoadAllRequests({requestCollection: this.requestList}));
}
DeleteRequest() {
this.store.dispatch(DeleteRequest({requestID : this.requestList[0].RequestId}));
}
}
request.reducer.ts
import { UpdateRequest , LoadAllRequests, DeleteRequest } from '../actions/request.actions';
import { Request, RequestInitial } from '../models/request.model';
import {createReducer, on} from '@ngrx/store';
import { Action } from 'rxjs/internal/scheduler/Action';
// New Interface for Request State
export interface RequestState {
requestCollection: Request[];
request: Request;
requestId: Request['RequestId'];
}
// Initialize Store State with Request Initial Const and empty values
export const requestInitialState: RequestState = {
requestCollection: [],
// requestCollection: Request[2] = [
// { RequestId : '1', Name : 'Test1'},
// { RequestId : '2', Name : 'Test2'},
// { RequestId : '3', Name : 'Test3'}
// ],
request: RequestInitial,
requestId: '0'
};
// Create a reducer function with switch state for each action in action.ts
export const requestReducer = createReducer(
requestInitialState,
on(UpdateRequest, state => ({
...state,
request : state.request,
})),
on(LoadAllRequests, (state , { requestCollection}) => ({
...state,
requestCollection : state.requestCollection
]
})),
);
request.actions.ts
import {createAction, props} from '@ngrx/store';
import { Request } from '../models/request.model';
export const UpdateRequest = createAction(
'[Request] UpdateRequest',
props<{request: Request}>()
);
export const LoadAllRequests = createAction(
'[Request] LoadAllRequests',
props<{requestCollection: Request[]}>()
);
export const DeleteRequest = createAction(
'[Request] DeleteRequest',
props<{requestID: Request['RequestId']}>()
);
export const loadRequestFailure = createAction(
'[Request] ErrorRequest',
props<{error: any}>()
);
request.component.html
<button click="LoadRequests()">Load All Requests</button>
我想从 LoadRequests() 方法中的调度方法传递有效负载数据,但是我 运行 LoadRequests 方法没有更新 requestCollection。
我不确定我做错了什么,但我正在尝试创建一个示例,在该示例中我可以将数据从 dispatch 方法传递到操作,然后传递到 reducer 以更新商店。
request.component.html 中出现问题。您没有正确绑定。
<button (click) ="LoadRequests()">Load All Requests</button>
此外,您没有在 reducer 函数中使用 payload
on(LoadAllRequests, (state , { requestCollection }) => ({
...state,
requestCollection : requestCollection
})),
我刚开始学习 ngRx。我正在尝试创建一个商店,该商店将通过组件的操作进行更新。我正在使用 NgRx 创建方法来创建操作和缩减器。
request.Component.ts
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Request } from '../models/request.model';
import { RequestState } from '../reducers/request.reducer';
import { Observable } from 'rxjs';
import { UpdateRequest , LoadAllRequests, DeleteRequest } from '../actions/request.actions';
@Component({
selector: 'app-request',
templateUrl: './request.component.html',
styleUrls: ['./request.component.css'],
})
export class RequestComponent {
request$: Observable<RequestState>;
requestList = Request[2] = [
{ RequestId : '1', Name : 'Test1'},
{ RequestId : '2', Name : 'Test2'},
{ RequestId : '3', Name : 'Test3'}
];
constructor(private store: Store<{ request: RequestState }>) {
this.request$ = store.pipe(select('request'));
}
UpdateRequest() {
this.store.dispatch(UpdateRequest({request : this.requestList[0]}));
}
LoadRequests() {
this.store.dispatch(LoadAllRequests({requestCollection: this.requestList}));
}
DeleteRequest() {
this.store.dispatch(DeleteRequest({requestID : this.requestList[0].RequestId}));
}
}
request.reducer.ts
import { UpdateRequest , LoadAllRequests, DeleteRequest } from '../actions/request.actions';
import { Request, RequestInitial } from '../models/request.model';
import {createReducer, on} from '@ngrx/store';
import { Action } from 'rxjs/internal/scheduler/Action';
// New Interface for Request State
export interface RequestState {
requestCollection: Request[];
request: Request;
requestId: Request['RequestId'];
}
// Initialize Store State with Request Initial Const and empty values
export const requestInitialState: RequestState = {
requestCollection: [],
// requestCollection: Request[2] = [
// { RequestId : '1', Name : 'Test1'},
// { RequestId : '2', Name : 'Test2'},
// { RequestId : '3', Name : 'Test3'}
// ],
request: RequestInitial,
requestId: '0'
};
// Create a reducer function with switch state for each action in action.ts
export const requestReducer = createReducer(
requestInitialState,
on(UpdateRequest, state => ({
...state,
request : state.request,
})),
on(LoadAllRequests, (state , { requestCollection}) => ({
...state,
requestCollection : state.requestCollection
]
})),
);
request.actions.ts
import {createAction, props} from '@ngrx/store';
import { Request } from '../models/request.model';
export const UpdateRequest = createAction(
'[Request] UpdateRequest',
props<{request: Request}>()
);
export const LoadAllRequests = createAction(
'[Request] LoadAllRequests',
props<{requestCollection: Request[]}>()
);
export const DeleteRequest = createAction(
'[Request] DeleteRequest',
props<{requestID: Request['RequestId']}>()
);
export const loadRequestFailure = createAction(
'[Request] ErrorRequest',
props<{error: any}>()
);
request.component.html
<button click="LoadRequests()">Load All Requests</button>
我想从 LoadRequests() 方法中的调度方法传递有效负载数据,但是我 运行 LoadRequests 方法没有更新 requestCollection。
我不确定我做错了什么,但我正在尝试创建一个示例,在该示例中我可以将数据从 dispatch 方法传递到操作,然后传递到 reducer 以更新商店。
request.component.html 中出现问题。您没有正确绑定。
<button (click) ="LoadRequests()">Load All Requests</button>
此外,您没有在 reducer 函数中使用 payload
on(LoadAllRequests, (state , { requestCollection }) => ({
...state,
requestCollection : requestCollection
})),