React - Redux store의 state 변경법

thisishwarang·2023년 1월 3일

Redux의 state 변경하는 step.3

  1. store.js에 state변경 함수 만들기
  2. export
  3. 필요한 곳에 import하고 dispatch()로 감싸서 사용

1. store.js에 state변경 함수 만들기

Redux 2 글에 썼던 코드에 이어 쓰자면

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

위 코드와 같이 reducers : {} 만들어서 이 안에 state 변경함수를 만들면 된다
state 변경함수의 파라미터는 기존의 initialState에 있던 값이다.

2. export

export let { changeName } = user.actions

이 코드를 slice함수 밖에 작성

3. 필요한 곳에 import하고 dispatch()로 감싸서 사용

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

(생략)

<button onClick={()=>{
	dispatch(changeName())	
}}>이름 바꾸는 버튼</button>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
출처 : https://codingapple.com/

0개의 댓글