리덕스 4 장바구니 담기 숙제 중 2번이 이상하게 동작합니다.

addItem 함수 안에서  for 문 돌면서 state에 추가한 값이 잘 들어가있는지 확인했을 때, 3개 아이템의 정보가 잘 찍히는 것을 확인하였는데
/cart 페이지로 넘어가면 그 값들이 반영이 안되어있습니다. 

*detail.js에서 addItem하는 부분
<button className="btn btn-danger"
onClick={ () => {
dispatch(addItem({id : 3, name : obj.title, count : 1, }));
 }}>주문하기</button>

*boughtItem.js (리덕스 함수) 구현 부분

import { createSlice } from "@reduxjs/toolkit";

let boughtItem = createSlice({
name : 'boughtItem',
initialState : [
 {id : 0, name : 'Hunt', count : 2},
 {id : 2, name : 'Witch', count : 1},
 ],
reducers : {
    addCount(state, action){
    let id = action.payload;
    state.forEach(element => {
       if(element.id === id){
         element.count += 1;
       }
      });
     /**
      *. state.findIndex( (a) => { return a.id == action.payload})
     */
    }, 
    addItem(state, action){
       state.push(action.payload)
       state.forEach( elem => {
            console.log( `id : ${elem.id}, name : ${elem.name}, count : ${elem.count}`);
         })
      }
   }
})

export let {addCount, addItem} = boughtItem.actions

export default boughtItem;

* /detail/0 페이지에서 '주문하기'버튼 클릭한 화면 - addItem되면 콘솔창에 항목 출력해봤습니다.

-> 의도하대로 배열 사이즈 2개에서 3개로 늘어났고,정보도 입력이 되어있습니다. 

* cart.js 구현

import { Table } from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { setName, addAge} from '../store/userSlice.js';
import { addCount } from '../store/boughtItem.js';

function Cart() {
const user = useSelector(state => { return state.user })
let dispatch = useDispatch()

return (
<div>
<p>
{user.name} {user.age} 의 장바구니
</p>
<button onClick={() => {
dispatch(addAge(3))
 }}>age+1</button>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>상품명</th>
<th>수량</th>
<th>변경하기</th>
</tr>
</thead>
<CartItem />
</Table>
</div>
 )
}

function CartItem() {
const items = useSelector(state => { return state.boughtItem })
let dispatch = useDispatch()
console.log(items)

return (
<tbody>
{
items.map(function (item, idx) {
return (
<tr key={idx}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.count}</td>
<td>
<button onClick={()=>{
dispatch(addCount(item.id));
 }}>+</button>
</td>
</tr>
 )
 })
}
</tbody>
 )
}

export default Cart;


의도와 다르게 아이템이 2개밖에 나와있지 않습니다. 

add하는건 문제가 없었는데... 카트 페이지에서는 내용이 안 보이는 이유가... 무엇일까요? ㅠ