Redux-toolkit : store의 state 변경하는 법

Redux 의 state를 변경하고 싶다고요? 

그러면 3가지 단계를 따르세요

1. store.js 에 state 변경해주는 함수부터 만들고
2. 그 함수를 export 해두고
3. 필요할때 import 해서 dispatch()로 감싸서 호출함

 

 

1. store.js에 state 변경해주는 함수부터 만들어요

 

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

//reducer 뒤에는 state 변경함수를 넣는다
let user = createSlice({
   name: 'user',
   initialState: 'kim',
   reducers: { //reducers즈 란다. 
   changeName(state){ // 파라미터 state는 기존state를 뜻함
    return 'John'+ state
   }
   }
})

slice 안에 reducers:{} 열고 state 변경함수를 작명해서 넣는다

reducers:{

  함수1(){

return 새로운 state값~~

}}

리턴 우측은 새로운 state 값으로 기존 값을 갈아치운다!!

만약, 기존의 state에 첨가하는 식으로 새로운 state를 변경하고 싶다면,

파라미터에 state 를 넣고 return 문에도 기존 state를 뜻하는 state를 작성해준다

 

이제 changeName() 쓸 때 마다 'kim' -> 'john kim' 이렇게 변할듯 

 

 

 

 

 

2. 다른 곳에서 쓰기 좋게 export 해둡니다

 

이제 변경함수를 만들었으니 export 해볼게요

// 아래에는 state 변경함수들 전부가 남음
export let {changeName} = user.actions

이런 코드를 store.js 밑에다가 추가하면 됩니다

아래에는 state 변경함수들 전부가 남고 그것들을 그냥 변수에 저장한거예요

 

여기들어가는 문법은 구조분해할당이라는 건데... 설명하자면

user.actions의 객체 자료 중 changeName이라는 속성을 추출하여 변수로 저장한거심

 

 

 

 

3. 원할 때 import 해서 사용하고요, dispatch() 로 감싸서 호출할게요~

 

(Cart.js)

//useDispatch는 store.js로 요청을 보내주는 함수임
import { useDispatch, useSelector } from 'react-redux'
import  {changeName}  from './store' 

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

먼저, changeName 이라는 변경함수를 store.js에서 import 해옵니다

useDispatch 라는 라이브러리도 사용하니까 데려올게요

 

changeName() 를 사용하는 그 자리에 그대로 쓰면 XXX

반드시 dispatch( changeName() ) 이런식으로 감싸서 실행해주어야 합니다

 

 

+버튼을 누르면 kim에서 +John 이 됩니다

+버튼을 누를때마다 John이 추가됩니다

 

 

 

 

 

 

---다음은 전체코드입니다---

import { Table } from 'react-bootstrap' 
import { useDispatch, useSelector } from 'react-redux'
import  {changeName}  from './store'

function Cart(){
  
  
  let allState = useSelector((state)=>{return state}) //이 코드 자리에는 Redux store에 있는 모든 state들 남음
  let stock = useSelector((state)=>{return state.stock})
  let carts = useSelector((state)=>{return state.carts})
  let dispatch = useDispatch() //store.js로 요청을 보내주는 함수임
 
  //참고로, {}와 return 을 한번에 생략가능
  console.log(allState.user)
  console.log(stock)
  console.log(carts)
  
  
    return(
  <div>

 {allState.user}의 장바구니
 
<Table>
  <thead >
    <tr>
      <th>#</th>
      <th>상품명</th>
      <th>수량</th>
      <th>변경하기</th>
    </tr>
  </thead>
  {/*데이터 갯수에 맞게 표 생성해달라고 반복문쓰는 것도 좋을듯요*/}
  {/*map으로 html 생성할때 일단 {}부터 쓴다 */}
  {
  carts.map((item,i)=>{
    return (
    <tbody key={i}>
    <tr>
      <td>{i+1}</td>
      <td>{item.name}</td>
      <td>{item.count}</td>
      <td>
        <button onClick={()=>{
          dispatch(changeName())
        }}>➕</button>
      </td>
    </tr>
  </tbody>
    )
   })
}
</Table> 

        </div>
    )
}

export default Cart

 

 

 

 

왜 이렇게 복잡하게 하나요?

컴포넌트에서 state 직접 수정하면 편하지 않나요?

하지만, 이 방식은 위험합니다

 

제 멋대로 각 컴포넌트에서 state 변경을 직접해버리면

만약 오류가 생겼을 때 100개의 컴포넌트를 뒤져야 할수도...