React Redux 3 : store의 state 변경하는 법

Redux의 state를 변경하는 법

useState의 [변수, set변수]의 set 역할처럼 변경함수를 만들어야하는데

3 STEP❗
1. store.js에 state 변경해주는 함수부터 만들고
2. export 해두고
3. 필요할 때 import 해서 쓰면 되는데 dispatch() 로 감싸서 써야한다.

저번 챕터의 데이터를 Cart 컴포넌트에 적용하는 작업을 해보자

(store.js)

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

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

(cart.js)

function Cart() {
  const state = useSelector((state)=> state)
  
  return (
    <>
    {state.user.name} 의 장바구니
    <Table>
      <thead>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경하기</th>
        </tr>
      </thead>
      <tbody>
        {
          state.userData.map((a, i)=>
          <tr key={i}>
            <td>{state.userData[i].id}</td>
            <td>{state.userData[i].name}</td>
            <td>{state.userData[i].count}</td>
            <td>
              <button onClick={()=>{
                dispatch(changeName())
              }}>+</button>
            </td>
          </tr>
          )
        }
      </tbody>
    </Table>
  </>
  )
}

데이터가 잘 나오는걸 볼 수 있다.

버튼누르면 예전에 'kim' 이라고 저장해놓은걸 'john kim' 으로 수정하고 싶으면?

state 수정해주는 함수부터 store.js에 만들어두고
그걸 컴포넌트에서 원할 때 실행하는 식으로 코드를 작성하는데

3STEP❗
1. store.js 안에 state 수정해주는 함수부터 만듭니다.

(store.js)

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

slice 안에 reducers : { } 열고 거기 안에 함수 만들면 된다.

• 함수 작명은 자유.
• 파라미터를 하나 작명하면 그건 기존 state가 된다.
• return 우측에 새로운 state 입력하면 그걸로 기존 state를 갈아치워준다.

이제 changName() 함수를 사용할 때 마다 'kim' -> 'john kim'으로 변한다.

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

(store.js)

export let { changeName } = user.actions 

위 코드 store.js 밑에 추가하면 된다.
slice이름.actions 라고 적으면 state 변경함수가 전부 그 자리에 출력된다.

3. 원할 때 import 해서 사용한다. 근데 꼭 dispatch() 로 감싸서 써야한다.

예를 들어서 Cart.js 에서 버튼을 만들고
그 버튼 누르면 state를 'kim' -> 'john kim' 이렇게 변경하고 싶으면

(Cart.jsx)

(Cart.js)

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

(생략) 

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

• store.js에서 원하는 state변경함수를 가져오면 되고 changeName()
• useDispatch 라는 것도 react-redux 라이브러리에서 가져온다.
• dispatch( state변경함수() ) 이렇게 소괄호로 감싸서 실행하면 state 변경된다.

❗❗ dispatch로 꼭 감싸야 실행된다 ❗❗