22.10.30 React 8일차 / Redux, payload, findIndex, localstorage

// state가 object,array 일때 변경법

직접 수정해도 immer.js 라는 라이브러리도 자동으로 설치되어서 알아서 적용해준다.

 

// 장바구니 만들기

 

수량 + 기능 만들기

 

let cart = createSlice({
    name : 'cart',
    initialState : [
      {id : 0, name : 'White and Black', count : 2},
      {id : 2, name : 'Grey Yordan', count : 1}
    ]
    }
  })

기존에 존재하는 cart 파라미터에 store.js에서 변경시킬 수 있는 reducer를 추가해주어야 변경시킬 수 있다.

let cart = createSlice({
    name : 'cart',
    initialState : [
      {id : 0, name : 'White and Black', count : 2},
      {id : 2, name : 'Grey Yordan', count : 1}
    ],
    reducers : {
      addCount(state, action){
        state[action.payload].count++
      }
    }
  })

reducers에 state로 해당 cart에 정보를 불러들인 후, action과 payload를 주어서 기능을 활성화 시키려한다.

 

export let { addCount } = cart.actions

마지막으로 이 addCount를 사용하기 위해서 export 해주면 다른 파라미터에서 사용이 가능햐진다.

 

 

addCount( id )의 상품의 카운트가 1씩 늘어나는 역할을 하는데, 우리가 원하는 것은 내가 누르는 상품의 id를 알아서 찾아줘야 하기때문에 더 진행시켜야 한다. 

 

    dispatch(addCount(i))

i를 줬을때의 문제점은, 해당 장바구니 페이지에서 물건의 위치가 바뀌었을 경우, 정렬을 따로 했다던가 했을때의 의도와 다르게 작동하게된다. 그렇기 때문에 제품 고유의 id를 찾아와 그와 같은 상품의 수량을 ++ 시키는 코드를 짜려한다.

 dispatch(addCount(state.cart[i].id))

해당 i를 위와 같이 바꿔 준 후에, addCount를 재수정하려한다.

 

/ findIndex

 

findIndex((파라미터) => { return 조건식 })

 

파라미터는 불러온 state내부의 데이터를 빼올 수 있으며, 조건에 맞는 정보들을 찾는 역할이다.

 

    reducers : {
      addCount(state, action){
        let setIdcart = state.findIndex((a)=>{ return a.id == action.payload })
        state[setIdcart].count++
      }
    }

결과적으로, 해당 버튼을 누르면 옆에 있는 제품의 고유 id를 payload에 불러들여서 증가시키는 형식으로 작동된다.

 

// 주문하기

 

        state.push({id : 1, name : "포켓몬스터 바이올렛", count : 1})

 

state.push 를 이용하면 해당 어레이 데이터를 추가해줄 수 있다. 해당 데이터를 직접 입력하는것이 아니라, 각기 다른 데이터를 입력해주어야 되기 때문에 위에 사용했던 payload를 또 사용해주는 코드를 만들어야 한다.

 

            <button className="btn btn-danger" onClick={()=>{
              dispatch(addItem({ id : 1, name : '스칼렛', count : 1}))
            }}>주문하기</button> 
            </div>

detail.js에서 주문하기 버튼에 onclick을 추가하여 해당 코드를 넣어주고, 상단에 dispath, addItem을 import 해준다.

 

// localStorage, sessionStorage

크롬 개발자모드에 해당기능들이 있다. 두개의 차이점은 청소하지 않는이상 계속 남아있는 로컬스토리지와, 껏다 키면 사라지는 세션스토리지 두가지가 있다.

 

로컬 스토리지. 세션 스토리지. 의 추가/삭제/사용법

문자만 저장할 수 있기때문에, array나 object를 저장하기 위해서는 json의 방법으로 문자로 변환하여 저장해주어야한다.

  let obj = {name:'kim'}
  localStorage.setItem('data', JSON.stringify(obj))

array값이 정상적으로 저장된 것을 볼 수 있다.

json.parse()

json.parse는 해당 문자값을 다시 array,object 값으로 변경시키는 json 문법이다.