React - 쇼핑몰 웹사이트 (5) - Redux, localStroage

Redux Tookit 

장바구니 state가 App, Detail, Cart에 필요하면 어디에다가 만들어야하나 ? 

 

Redux를 사용하면 Component들이 props없이 state공유 가능 

 

1. 등록 방법 

[Redux 세팅 1]

//store.js
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

[Redux 세팅 2]

//index.js


import { Provider } from "react-redux";
import store from './store.js' //->요기

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}> //->요기
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

 

 

Redux Store에 State를 보관하려면 ? 

 

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',
  initialState : 'kim'
})

export default configureStore({
  reducer: {
    user : user.reducer
  }
})

reducer : {

          user(작명해주면 되는데 귀찮으면 그냥 같은 이름으로 해도됨)  : user.reducer

}

 

! 등록을 해줘야함 .reducer붙여줘 

 

2. 등록  후 사용방법 

//Cart.js
let a =  useSelector((state)=>{return state})
console.log("USER=====", a.user) //kim이 나옴 

//Cart.js
let a =  useSelector((state)=>{return state.user})// -> 내가 원하는거만 가져올 수 있음 
console.log("USER=====", a) //kim이 나옴

a.user에 kim이 들어가있는걸 확인할 수 있음 

 

 

 

function Cart(){
    let state =  useSelector((state)=>{return state})
    return (
        <div>
           <Table striped bordered hover>
      <thead>
        <tr>
          <th>#</th>
          <th>ID</th>
          <th>NAME</th>
          <th>COUNT</th>
        </tr>
      </thead>
      <tbody>
        {
            state.cart.map((a,i)=>
            <tr>
            <td>#1</td>
            <td>{state.cart[i].id}</td>
            <td>{state.cart[i].name}</td>
            <td>{state.cart[i].count}</td>
            </tr>
            )

        }

      </tbody>
    </Table>
        </div>
    )
}

3. state변경하는 법

1. state를 수정하는 함수를 만듬

  : reducers : 라는 항목안에 함수를 만들어야함 ( 위에 있는 state를 수정하는 함수 ) 

  : 함수 안에 있는 변수는 기존 state 

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state
    }
  }
})

 

2. 만든 함수를 export해야함 

export let { changeName } = user.actions

 

3. 필요한 곳에서 가져다 씀 

(Cart.js)

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"

(생략) 

<button onClick={()=>{
  dispatch(changeName())
}}>버튼임</button>

 

4. dispatch로 필요한 위치에서 함수 실행해달라고 store.js에 부탁 !

: 수정함수 1 실행 좀 부탁 -> store.js 

 : 버그가 있을때 수정함수만 찾으면 되니까 

import {useSelector, useDispatch} from 'react-redux';


let dispatch = useDispatch()

<tbody>
        {
            state.cart.map((a,i)=>
            <tr>
            <td>#1</td>
            <td>{state.cart[i].id}</td>
            <td>{state.cart[i].name}</td>
            <td>{state.cart[i].count}</td>
            <td><button onClick={()=>{dispatch(changeKim())}}>+</button></td>
            </tr>
            )
           
        }
         
      </tbody>

 

3. state가 object/ array일때 변경하는 법

1. 정석방법

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      return {name : 'park', age : 20}
    }
  }
})

 

2. array/object 의 경우는 직접 수정해도 state가 변경됨 

: 주의 ! reducers 안에 함수 값을 수정할때는 return빼줘야함 

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
})

 

 

3. payload는 화물/소포/택배라는 뜻 

store.js에 부탁을 하는데 (메시지) 에 실어보내는 payload(화물)임 

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, a){
      state.age += a.payload
    }
  }
})

 

 

//사용할때는 
dispatch(increase(100))

 

state변경함수를 보통 action이라고 하기 때문에 a대신에 action으로 작명을 많이 함 

 

 

"자바스크립트는 그냥 &&로 연결된 값들 중에 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막값을 남겨준다"

true && '안녕';
false && '안녕';
true && false && '안녕';

 

4. localStorage로 만드는 최근 본 상품 기능 1

3개 밖에 없음 쉬움 

localStorage.setItem('데이터이름', '데이터');
localStorage.getItem('데이터이름');
localStorage.removeItem('데이터이름')

 

json 파일은 요런식으로 편법으로 해서 저장함 

//json으로 바꿔서 저장 
let obj = {name : "kim"}
localStorage.setItem('data', JSON.stringify(obj))

//json을 object로 꺼내옴
let jsondata = localStorage.getItem('data')
let objectdata = JSON.parse(jsondata)

 

 

 

5. localStorage로 만드는 최근 본 상품 기능 2

  useEffect(()=>{
    let recent = localStorage.getItem('watched')
    recent = JSON.parse(recent)
    recent.push(finditem.id)
    recent = new Set(recent)
    recent = Array.from(recent)
    localStorage.setItem('watched', JSON.stringify(recent))
    
  }, [])

 

모든 state들을 localStorage에 자동저장하려면 redux-persist / Jotai / Zustand 등이 있음