[英]NGRX Store - Create multiple instance of one model
I have ngrx/store up and running, and I am getting my head around it.我已经启动并运行了 ngrx/store,我正在了解它。 I can create an action and a reducer to store data based from a model, however when I go to create a second instance of one inside state, it simply adds a new line to my existing state:
我可以创建一个 action 和一个 reducer 来存储基于模型的数据,但是当我去创建一个内部状态的第二个实例时,它只是向我现有的状态添加一个新行:
Reducer.ts减速器.ts
import * as orderhead from '../_actions/orderhead';
import { OrderHead } from '../_models/index';
// Set State to mimic that of the OrderHead model
export interface State {
orderID: string[];
entryDate: string[];
requireDate: string[];
headerRef: string[];
pirotity: string[];
};
// Set initial state to empty
const initialState: State = {
orderID: [],
entryDate: [],
requireDate: [],
headerRef: [],
pirotity: [],
};
export function OHreducer(state = initialState, action: orderhead.Actions): State{
switch (action.type) {
case orderhead.ActionTypes.CREATE_OH:
// Create a new instance of the model OrderHead and store it
// all other aspects of the model will be updated by other actions
const order = [...state.orderID, action.payload.orderID]
return Object.assign({}, state, {orderID: order})
}
}
And some code to populate the store with some data:还有一些代码来用一些数据填充商店:
createOrderHead(orderid){
this._store.dispatch({type: orderhead.ActionTypes.CREATE_OH, payload: {orderID: orderid} });
}
Now if I run:现在,如果我运行:
createOrderHead('ABC123')
createOrderHead('DEF456')
What I get is:我得到的是:
{ orderhead: {
orderID: [
'ABC123',
'DEF456'
],
entryDate: [],
requireDate: [],
headerRef: [],
pirotity: []
}
}
However, what I am after is:但是,我所追求的是:
{ orderhead: [
{
orderID: 'ABC123',
entryDate: [],
requireDate: [],
headerRef: [],
pirotity: []
},
{
orderID: 'DEF456',
entryDate: [],
requireDate: [],
headerRef: [],
pirotity: []
}
}]
}
I have tried to take some adapation from the sample app provided, but at present I am not able to extract what I need from it in order to find a solution, if someone would be able to let me know what part of my code needs to change in order for this to work, that would be great.我试图从提供的示例应用程序中进行一些调整,但目前我无法从中提取我需要的内容以找到解决方案,如果有人能够让我知道我的代码的哪一部分需要更改以使其正常工作,那将是很棒的。
I did try resting state at the start of the reducer, but this obviously just wipes it clean each time its called, destroying previous data.我确实在减速器开始时尝试了静止状态,但这显然只是在每次调用时将其擦干净,破坏了以前的数据。
Update Working,:更新工作,:
So I have updated my reducer, as suggested I needed to create an empty array inside state, and then modify my return statement, working reducer:所以我更新了我的减速器,建议我需要在 state 中创建一个空数组,然后修改我的 return 语句,工作减速器:
import { OrderHead } from '../_models/index';
// Set state to that of imported model
export interface State {
orders : OrderHead[]
};
// Set initial state to empty
const initialState: State = {
orders : []
};
export function OHreducer(state = initialState, action: orderhead.Actions): State{
switch (action.type) {
case orderhead.ActionTypes.CREATE_OH:
// Map payload to instance of array
const order = [...state.orders, action.payload]
// Assign the order to the array
return Object.assign({}, state, {orders: order})
}
}
I think you should need to change your state to an array of orders.我认为您应该需要将您的状态更改为一系列订单。 Then add the orders to the array.
然后将订单添加到数组中。
import * as orderhead from '../_actions/orderhead';
import { OrderHead } from '../_models/index';
// Set State to mimic that of the OrderHead model
export interface Order {
orderID: string | null;
entryDate: string | null;
requireDate: string | null;
headerRef: string | null;
pirotity: string | null;
}
export interface State {
orders : Order[]
};
// Set initial state to empty
const initialState: State = {
orders : []
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.