REACT- Redux 3 : store의 state 변경하는 방법을 알아보자

Redux에서 state를 변경하는 방법을 알아보자.

제일 먼저 state 수정해주는 함수를 만들고 함수를 실행해달라고 store.js에 요청해야한다.

 

1. state 수정하는 함수만들기 : reducers등장

const user = createSlice({
    name : 'user',  
    initialState : 'kim', 
    reducers : {
      changeName(state){ //--> 위의 state를 수정하는 함수를 요기다가 만드는 것
      	return 'sol' + state
      }
    }
})

 

 

 

2. 함수 만든 것을 사용할 수 있게 export해줘야함

const user = createSlice({
    name : 'user',  
    initialState : 'kim', 
    reducers : {
      changeName(state){ //--> 위의 state를 수정하는 함수를 요기다가 만드는 것
      	return 'sol' + state
      }
    }
})

export const {changeName, export하고 싶은 함수 다 담기} = user.actions

 

 

3. 함수를 필요한 곳에갖다 사용할 수 있도록 import하기

Cart.js

import {changeName} from "./../store.js"

function Cart(){
	
    const state = useSelector((state)=> state)
    const dispatch = useDispatch(); //store한테 요청을 보내주는 함수임
	
    return (
        <div>
            <button onClick={()=>{}}>+</button>
            <Table>
            
        -- 밑 코드 생략 --

 

dispatch(state변경함수()) 사용

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

 

 

이렇게 하다 문뜩 드는 생각은 

아.. Redux 복잡하다. 수정하기 위해서는 store.js에 있는 것을 export하고 import한 후 꼭 dispatch()로 감싸지 않으면 오류가나고.. 

 

직접 수정을 하면 편리하지만 프로젝트가 커질 수 있는 상황에서는 Redux를 사용하여 수정을 하는 것이 좋다.

컴포넌트가 너무 많아서 직접 'kim'이라는 state를 변경하려다가 버그가 발생하면 그 많은 컴포넌트를 하나씩 다 찾아서 봐야하기 때문이다.

 

근데 Redux로 수정을 할 경우에는 store.js에 미리 만들어둔 뒤 컴포넌트가 실행해달라는 것만 가져와 코드를 짜면

버그발생 시 어떤 문제였나 찾기가 편합니다. 원인이 어딨는지 바로 알아낼테니까요.(Store.js 요놈요놈)