오브젝트 데이터 푸쉬 ...

[이도현]

선생님... 오브젝트 데이터 푸쉬...

4시간째입니다...

처음에는  리덕스 모듈을 만들어서 해보려고 아래와 같이 만들고 여러번 시도 했는데.....
이런저런 에러가 떠서  ( object is not iterable ) 에러에 대해 구글링하고 찾고 공부하고 수정하고  반복 하다가 잠시 포기했습니다. 

1번질문..
onClick안에서 dispatch( addData( 오브젝트 직접 코딩 ) )  이런 형태로 쓰려고 한다면... 제가 만든 함수의 형태가 틀린거겠죠..?

 

 

 

 

 

 

 

 

 

 

 

이후 강의 내용처럼이라도 따라가보려고 아래처럼 디스패치에 직접 코딩해서 타입과 데이터 넣고  

 

리듀서 내용은 case 하나를 더 추가해서 아래와 같이 만들었습니다.

 

근데 대체 왜 ... 주문하기버튼을 아무리 눌러도 반응이 없을까요...

history로 카트 넘어가도 당연히 데이터 추가가 되어있지 않습니다.

if문이 switch문으로 바뀐거 말고는 강의내용과 똑같이 코딩했는데.. ㅠㅠ

뭔가 제가 잘못짜서 default 값으로 쌩 state를 return 해주는것 같기도 한데.... 해결할수가 없습니다... 

이것이 질문 2 입니다..... 

[codingapple]

addData(오브젝트자료) 이렇게 쓰면 dispatch용으로 사용할 오브젝트 자료가 잘 남을 것 같은데요 

case 'ADD_DATA' : 

따옴표빠진게 아닐까요 

[이도현]

해결법이 따옴표 누락이었던 것에 대한 질문은 매우 죄송스럽습니다.ㅠ... 여러의미로...
강의에서 나온 방식으로 정상작동하는것 확인했습니다.

이어서 선생님께서  @ addData(오브젝트자료) 이렇게 쓰면 dispatch용으로 사용할 오브젝트 자료가 잘 남을 것 같은데요 @
라고 답변해주셨는데

아래와 같은 에러에서 벗어나지 못하고 있습니다.
TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) 

에러명부터 시작해서 여러가지 키워드로 검색하다가  모질라 에서 제 에러 상황에 관련된 문서는 찾았습니다.

 

리듀서의 copyState 부분과   component 내 dispatch부분이 문제라고 찝어내고있습니다. 
어느 부분이 문제가 된건지 알 수 있을까요 ?

 

액션 타입과 액션생성 함수입니다.

 

초기 스테이트와 리듀서 부분입니다.

 

detail.js 입니다. 

 

 

 

[codingapple]

언제나 실험을 해보면 알 수 있습니다 

리듀서 안에서 copyState라는 변수랑 state라는 파라미터를 콘솔창에 출력해봅시다 array 자료가 잘 나옵니까 

[이도현]

네 선생님 리듀서 안에서 console.log(copyState);    console.log(state);   하면 
둘다 똑같이 3개의 object가 들어있는 array 자료가  콘솔창에 잘 나옵니다 .

다음은 어떻게 해야할까요 ..?

 

[codingapple]

case 'ADD_DATA' : 

안에있는 copyState 출력해보면 상품이 4개 잘 담겨있습니까

 

근데 dispatch 날릴 때 { type : 'cartQuan/ADD_DATA' } 이걸로 날린거 같은데

case 'cartQuan/ADD_DATA' : 이렇게 해야하는거 아닐까요

[이도현]

Q.  case ‘ADD_DATA’ : 
      안에있는 copyState 출력해보면 상품이 4개 잘 담겨있습니까

A.  case 안에서 콘솔출력을 할 수가 없습니다..
      주문하기 버튼을 클릭하여 dispatch()  값이 리듀서에 전달되고 case문 들어가기전에 
      위에 let copy state 부터 에러가 걸려서 멈춥니다.. ㅠ
     

Q.  근데 dispatch 날릴 때 { type : ‘cartQuan/ADD_DATA’ } 이걸로 날린거 같은데
      case ‘cartQuan/ADD_DATA’ : 이렇게 해야하는거 아닐까요

A.   아래 사진과 같이 ADD_DATA 가  const ADD_DATA : "cartQuan/ADD_DATA" 입니다. ㅠㅠ 
      나머지 변수선언은  첫 질문 최상단  액션타입과 액션 생성 함수 사진에 있습니다.
       

 

선생님 혹시 여기에 다른 잘못된부분 있는지 다시한번만 봐주실 수 있을까요 ? 

[codingapple]

사진말고 관련부분 전체 코드를 복붙해주십시오

[이도현]

<ul>
<li>cartQuan.js  (액션타입 + 액션함수 + 초기스테이트 + 리듀서 ) </li>
</ul>
/* 액션 타입 */
const ADD_DATA = 'cartQuan/ADD_DATA';
const INCREASE = 'cartQuan/INCREASE';
const DECREASE = 'cartQuan/DECREASE';

/* 액션 생성함수  */
export const addData = data => ({ type : ADD_DATA , payLoad : data }); 
export const increase = i => ({ type : INCREASE , i });
export const decrease = i => ({ type : DECREASE , i });

/* 초기 상태 선언 */
const initState = [
    {
        id: 0,
        name: 'shoes',
        price: 120000,
        quan: 2,
    },
    {
        id: 1,
        name: 'pants',
        price: 110000,
        quan: 3,
    },
    {
        id: 2,
        name: 'shirt',
        price: 100000,
        quan: 4,
    }
];

/* 리듀서 선언 */
export default function cartQuan(state = initState, action) {
    let copyState = [...state];

    switch (action.type){

        case ADD_DATA:
            copyState.push(action.payload);
            return copyState;

        case INCREASE:
            copyState[action.i].quan ++ ;
            return copyState; 

        case DECREASE:
            if(copyState[action.i].quan === 0){
                return state;
            }
            else {
                copyState[action.i].quan --  ;
                return copyState;
            };

        default : 
        return state;
    } 
}

 
<ul>
<li>Detail.js  의 주문하기 버튼 부분</li>
</ul>
import addData from '../modules/cartQuan' 

-------------------------------------------------------

<button className="btn btn-danger" onClick={() => {
                        props.dispatch( addData( {id: 3, name: 'DoDo', price: 990000, quan: 5} ) ;
                        history.push('/cart')
                    }}> 주문하기 </button> 

 

 

이상입니다 선생님

[이도현]

ul li 는 댓글다는 이곳 불릿 목록 쓴것이 적용안되어서 저렇게 나오네요 !

[글쓴이]

글