REACT- Redux4. state object, array일 경우 변경하는 방법을 알아보자.

 

이번에는 Redux 안에 있는 state가 object나 array일 경우에 변경하는 법을 알아보려한다.

 

initialState 안을 오브젝트로 변경한다. 

 

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'
import user from '../store/userSlice'

const user = createSlice({
    name : 'user',  // 'state이름',
    initialState : {name : 'kim', age : 20},
    reducers : {
      changeName(state){
        return 'park' + state
        }
    }
})

object로 바꿨기 때문에 state를 데이터바인딩하는 문법도 달라졌을 것이다.

 

Cart.js

function Cart(){ 

    let result = useMemo(()=>{ return testUsememo() }, [])
  
    const state = useSelector((state)=>{return state})
    console.log(state.cart)

    const dispatch = useDispatch();//store한테 요청을 보내주는 함수임

    const [count, setCount] = useState(0)

    return (
        <div>
            <p>{state.user.name} {state.user.age}의 장바구니</p>
            
            
            -- 밑 코드 생략 --

 

그럼, 변경하는 방법을 알아보자.

name : 'kim'을 -> name : 'sol'로 바꾸려면

import { configureStore, createSlice } from '@reduxjs/toolkit'
import user from '../store/userSlice'

const user = createSlice({
    name : 'user',  // 'state이름',
    initialState : {name : 'kim', age : 20},
    reducers : {
      changeName(state){
        return {name : 'sol', age : 20}
      }
    }
})

여기 이 return 부분이 바꿔지도록해야한다는 것이다.

 

return문을 안쓰고 직접 수정해도 state변경이 가능하다.

 

이 파라미터 state가 위에있는 state를 의미하고 state.name = 'sol'인 오브젝트 수정내용이 나온다.

 

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'
import user from '../store/userSlice'

const user = createSlice({
    name : 'user',  // 'state이름',
    initialState : {name : 'kim', age : 20},
    reducers : {
      changeName(state){
        state.name = 'park'
        //직접 수정가능 왜냐면 immer.js가 자동으로 되어있기 때문이다.
      }
    }
})

 

 

그럼 이번에 버튼하나 누르면 age : 20가 증가되는 기능을 만들어보자.

 

1. Store.js 에 increase라는 함수를 먼저만들기

    함수를 동작시키면 age가 +1되도록 만들기

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

export const { changeName , increase } = user.actions

 

 

 

이제 이 increase함수가 필요한 곳에서 갖다 쓰도록 Cart.js로 가서 import하고

import {useState, memo, useMemo} from 'react';
import {Table} from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { changeName, increase } from '../store/userSlice.js';

function Cart(){ 

    const state = useSelector((state)=>{return state})

    const dispatch = useDispatch();//store한테 요청을 보내주는 함수임

    return (
        <div>
            <p>{state.user.name} {state.user.age}의 장바구니</p>
            <button onClick={()=>{dispatch(increase())}}>버튼</button>
           
           
           -- 밑 코드 생략 --

 

 

근데 만약, 10개씩, 100개씩 증가하게하고 싶다면?

함수에 파라미터문법을 이용하여 쓸 때 마다 각각 다른 기능의 함수를 갖다 쓸 수 있다.

 

| state 변경 함수에 파라미터 뚫는 법

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'
import user from '../store/userSlice'

const user = createSlice({
    name : 'user',  // 'state이름',
    initialState : {name : 'kim', age : 20},
    reducers : {
      changeName(state){
        state.name = 'park'
        //직접 수정가능 왜냐면 immer.js가 자동으로 되어있기 때문이다.
      },
      increase(state, action){ //state변경함수를 action이라한다.
        state.age += action.payload
      }
    }
})

 

increase(state, action){ //state변경함수를 action이라한다.
state.age += action.payload // payload를 꼭 넣어주자