data자료를 reducer를 활용하여 전달할때 axios 추가 질문입니다

[breadlee]

안녕하세요 코딩애플님 🙂

쉽고 재밌게 좋은 강의 만들어주셔서 감사드립니다!

 

본 강의를 듣는 과정에서

강의명: [PWA 10초만에 발행하기 (모바일앱인척 사기치기)] 까지 들었을 때 service-worker.js 파일이 없어서 새로 다시 만들고 있습니다.

그 과정에서 강의 후반부에 배운 redux를 활용해서 data(신발 정보)를 index.js에 저장하고 가져다 쓰는 방식으로 해보고 있습니다.

이 과정에서 "메인 페이지(App.js)에서 더보기 버튼을 누르면 axios로 추가 상품 정보를 가져오기" 기능을 하다가 도저히 해결되지 않아서 질문드립니다 !

 

현재 제가 짠 코드로 보면, [더보기] 버튼을 누르면 데이터가 받아와지긴 하는데 3개가 동시에 뜨지 않고 하나만 뜨고 있습니다. 

[더보기]버튼을 또 눌러야 그다음 상품이 보이고 있습니다.

게다가 이미지는 문제 없이 불러와지는데, 상품명, 가격등의 정보는 보이지 않고 있습니다.

혹시 어떤 부분에 문제가 있는지 도움 부탁드립니다!

아래 제가 짠 코드 첨부 드립니다 🙂

 

 

(index.js)

import Data from './Data';

let shoeState = Data;
  
function reducer(state = shoeState, action) {
  //console.log(state)
  if (action.type === 'addList') {
    let setShoes = [...state]
    setShoes.push(action.payload)
    console.log(setShoes)
    return setShoes
  }
  else {
  return state
  }

}

const store = createStore(reducer);

 

 

 

(App.js)

  <div className="container">    
          <Product />
</div>

 

 

 

(Product.js)

const Product = (props) => {
    let history = useHistory();

    return (
        <div className="row">
            {
                props.state.map((a, i) => {
                    return (
                        <div className="col-md-4" key={i} onClick={()=>{ history.push('/detail/' + props.state[i].id) }}>
                            <img src={"https://codingapple1.github.io/shop/shoes" + (i + 1) + ".jpg"} width="100%" />
                            <h4> { props.state[i].title } </h4>
                            <p> { props.state[i].content } & { props.state[i].price } </p>
                        </div>
                    )
                })
            }
            <button className="btn btn-primary" onClick={() => {
                axios.get('https://codingapple1.github.io/shop/data2.json')
                .then((result) => {
                    console.log(result.data)
                    props.dispatch({ type: 'addList', payload: result.data } )
                })
                .catch(() => {
                    console.log('failure')
                  })
            }} >더보기</button>
           
        </div>
    );
};

function shoeProps(state) {
    return {
        state : state
    }
}
export default connect(shoeProps)(Product);

 

감사합니다!

[codingapple]

ajax요청하고 dispatch했을 때 state안에 상품이 6개 들어있는지 확인합시다

안들어있으면 리듀서에서 state 수정방법이 잘못된 것입니다 

[breadlee]

답변 감사드립니다 🙂

 

가이드 주신 대로 , [Product.js] 파일 내 ajax 요청 코드에서 console.log로 잘 받아왔는지 확인해본 결과, 

(3) [{…}, {…}, {…}]
0: {id: 3, title: "Flowey", content: "only 5 inches", price: 120000}
1: {id: 4, title: "Baby shoes", content: "for less than 6", price: 120000}
2: {id: 5, title: "Red Herring", content: "Born in France", price: 120000}
length: 3
__proto__: Array(0)

 

이렇게 콘솔창에 찍히면서 데이터가 잘 받아와지는 것이 확인됩니다!

 

다만, reducer에서 shoeState와 setShoeState를 콘솔로 확인해본 결과,

>> shoeState의 출력결과(정상)

(3) [{…}, {…}, {…}]
0: {id: 0, title: "White and Black", content: "Born in France", price: 120000}
1: {id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000}
2: {id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000}
length: 3
__proto__: Array(0)

 

>> setShoeState의 출력결과(...의문?? 새로 받아오는 데이터가 4번째 요소에 array로 담기는 현상)

(4) [{…}, {…}, {…}, Array(3)]
0: {id: 0, title: "White and Black", content: "Born in France", price: 120000}
1: {id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000}
2: {id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000}
3: Array(3)
0: {id: 3, title: "Flowey", content: "only 5 inches", price: 120000}
1: {id: 4, title: "Baby shoes", content: "for less than 6", price: 120000}
2: {id: 5, title: "Red Herring", content: "Born in France", price: 120000}
length: 3
__proto__: Array(0)
length: 4
__proto__: Array(0)

 

이렇게 보여지고 있습니다. 새로 받아오는 데이터(array)가 4번째 한꺼번에 담기고 있습니다.

따라서 받아오는 데이터를 [...action.payload] 형식으로 "대괄호를 벗기고 다시 대괄호에 담는" 방식으로 시도해도

문제가 잘 해결되지 않습니다 ㅠㅠ (아래 reducer 코드 첨부드립니다)

 

(index.js)

function reducer(state=shoeState, action) {
  console.log(state)
  if (action.type === 'addList') {
    let setShoes = [...shoeState]
    setShoes.push([...action.payload])
    console.log(setShoes)
    return setShoes
  }
  else {
    return state
  }
}

 

shoeState라는 state변수에는 "버튼을 누르기 전"이라서 기존 상품 3개만 뜨고,

버튼을 누르면 setshoes라는 state변경함수가 4개의 array 가 뜨는데 0,1,2는 기존 상품 3개이고,

새로 받아와지는 상품은 4번째에 한꺼번에 담기고 있습니다.

 

Q) 코딩애플님께서 답변주신 부분에서, "state안에 상품이 6개 들어있는지 확인"해보라고 말씀주셨는데요!

제가 기존에 이해하고 있던바로는, state는 초기값이라 상품 3개만 들어있고, state변경함수에는 state가 변경된 내용이 들어가기때문에

ajax로 새로 받아온 데이터가 추가된 총 배열이 보여지는 것이라고 이해했습니다. 그래서 버튼을 누르기 전에는 기존 3개상품만

보이고(=state), 버튼을 누른 후에야 state가 변경되어 상품이 6개가 보여진다고 생각했는데, 혹시 제가 잘못 이해하고 있는걸까요?

 

Q) state변경함수 console로 찍어보았을 때, 새로 받아온 상품3개가 한꺼번에 묶여서 담긴다는 것은 배열을 풀어줘야 하는 걸까요?

즉, result.data로 받아온 새로운 상품 3개에 대해, state변경함수 내에서 각 상품이 배열로 push 될 수 있게 하려면 어떻게 해야할까요?

제가 나름 시도해본 바로는...

1) axios에서 받아올 때, props.dispatch({ type: 'addList', payload: [...result.data] } )

위와 같이 배열 데이터를 새로운 배열에 담아서 보내보았습니다(콘솔로 찍어보면 대괄호로 감싸기 전후 차이가 없습니다)

2) reducer에서 state변경함수에 push할 때,  setShoes.push([...action.payload])

위와 같이 새로운 배열에 담는 방식으로 push해 보았습니다

어떤 부분이 잘못되었는지 짚어주시면 정말 감사하겠습니다!

 

[codingapple]

넴 state 수정 후에 6개 잘 나와있는지요

let setShoes = […shoeState, ...action.payload]
return setShoes

리듀서 이렇게 수정하면 될듯요

array 두개를 합칠땐 push를 쓰면 안됩니다 

 

[breadlee]

아하!!!

감사합니다 코딩애플님?

앞으로 array 끼리 합칠 경우에는 합치는 방법에 유의해서 사용할것같아요

감사드립니다 🙂   

[글쓴이]

글