TIL 7주 5일차

[Redux]

Redux의 state 변경하는 법

- state 수정해주는 함수 만들고

- 원할 때 그 함수 실행해달라고 store.js에 요청

 

1. state 수정해주는 함수 만들기

let user = createSlice({

  name : 'user',

  initialState : 'kim',

  reducers : {

    changeName(state){

      return 'john ' + state

    }

  }

})

 

2. 만든 함수 export 해주기

export let { changeName } = user.actions

-> 오른쪽 자료를 변수로 빼는 문법

 

3. 만든 함수 import해서 사용, dispatch(state변경함수())

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

 

 

let dispatch = useDispatch()

-> store.js로 요청보내주는 함수

 

<button onClick={()=>{

                dispatch(changeName())

              }}>+

              </button>

---

state가 array/object인 경우

-> return 없이 직접 수정해도 됨

 

let user = createSlice({

  name : 'user',

  initialState : {name : 'kim', age : 20 },

  reducers : {

    changeName(state){

      state.name = 'park'   //state 수정함수

    },

    changeAge(state){

      state.age += 1

    }

  }

})

export let { changeName, changeAge } = user.actions

 

state 변경함수에 파라미터 뚫는 법 // payload -> 메세지에 실어보내는 화물

-> 파라미터 뚫어놓으면 비슷한 함수 여러개 필요없음

changeAge(state, action){

      state.age += action.payload  //-> 화물 보낸거 출력문법

    }

changeAge(10) // +10

changeAge(100) // +100

action : state 변경함수