NGRX Store - Create multiple instance of one model

Question

I have ngrx/store up and running, and I am getting my head around it. 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:

Reducer.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:

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})
    }
}

Answer 1

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 : []
};