useDispatch로 두 타입의 state 변화하기

오형근·2022년 3월 5일
0

React

목록 보기
2/5

사실 이것은 편법,,,?
에 가깝고 왜인지 쓰면 언젠가는 오류가 날 것 같아서 좀 그렇지만
일단 메모해두기로 했다.

useDispatch를 사용할 때 하나의 이벤트로 두 타입을 모두 실행하고 싶어
batch, 함수 선언, Redux-saga 등등 여러 가지 방법을 시도해봤는데
결국 다 실패하였다(다음에 다시 제대로 공부하기로 하자).

그래서 일단 방법을 찾던 도중 특이한 편법이 생각나서 적는다.

store.js

export const modifier = (state = initialize, action) => {{
  switch (action.type){
    case "MOD": 
      return {
        ...state, // 기존의 것을 가져와 불변성을 지키는 것은 매우 중요한 문제이다..! 꼭 지키도록 합시다
        name: action.name, artist: action.artist, imgurl: action.imgurl,         visible: action.visible
      }
    case "VISIBLE":
      return {
        ...state,
        visible: action.visible
      }
    default: 
      return state
  }
}}

다음과 같은 store.js 에서 MODVISIBLE을 둘 다 발생시키고 싶었는데

결국 찾아낸 방법은 다음과 같다

<AlbumDiv ref={album} key={index} onClick={() => dispatch({type: "MOD", name: item.name, artist: item.artist, imgurl: item.image[3]['#text'], visible: true})}>

위의 코드와 같이 그냥 MOD에서도 visible을 편집하도록 지정해주면 되는 것이었다...! 어차피 visible은 단순하게 boolean의 값을 가지고 이를 true로 만드는 경우가 한 가지 뿐이므로 가능했던 것 같다... 다음에는 최대한 다른 방법을 찾아보자!

저런 경우 어차피 visible의 본래 값은 유지되고 변경 요청이 들어올 때만 변경이 되므로 충분히 좋은 방법이었다고 (혼자서)생각한다..ㅎㅎ

profile
개인 블로그 이전: plaintexting.com

0개의 댓글