Redux 03 | redux-actions / immer

katej927·2021년 7월 31일
0

middlewares & libraries

목록 보기
3/17
post-thumbnail

📌 redux-actions

🔹 효과

더 짧게 작성 → 가독성 ⬆, 객체 직접 작성x

🔹 사용법

🔸 액션 생성 함수

  • createAction 사용
  • (액션에 필요한) 추가 데이터 : payload
    • 형태
      • 기본형 예시
                        import { createAction } from "redux-actions";

                        export const increase = createAction(INCREASE)
                        export const decrease = createAction(INCREASE)
  • 예시 1. 액션 생성 함수 파라미터를 payload에 변형을 주어서 넣고 싶다면
    • creatAction 2번째 함수에 따로 선언
                            const MY_ACTION = 'sample/MY_ACTION';
                            const myAction = creatAction(MY_ACTION, text=> `${text}!`);
                            const action = myAction('hello world');

                            /*
                            	결과:
                            	{ type: MY_ACTION, payload: 'hello world!' }
                            */
  • 예시 2. 생략 가능한 파라미터
    • 파라미터를 그대로 반환하는 함수 (ex. id ⇒ id )
      • 생략 가능 (필수x)
      • 효과: 필요한 파라미터 값 파악 쉬워짐
                        export const toggle = createAction(TOGGLE, (id) => id);

🔸 리듀서

handleActions 사용

  • 기본형 예시
                    import { handleActions } from "redux-actions";

                    const counter = handleActions(
                      {
                        [INCREASE]: (state, action) => ({number: state.number +1}),
                        [DECREASE]: (state, action) => ({number: state.number -1})
                      },
                      initialState
                    )
  • 1번째 파라미터: 각 액션에 대한 업데이트 함수
  • 2번째 파라미터: 초기 상태

  • 추가 데이터 조회: action.payload 값을 조회
    • 객체 비구조화 할당 활용
      • action 의 payload 이름 새로 설정 → action.payload가 어떤 값 의미하는지 더 쉽게 파악 가능
    • 예시 1. action.payload 조회 & 객체 비구조화 할당
                        const todos = handleActions(
                          {
                            [CHANGE_INPUT]: (state, action) => ({ ...state, input: action.payload }),
                        		// 비구조화 할당
                        		[CHANGE_INPUT]: (state, {payload: input}) => ({ ...state, input }),
                        	},
                          initialState,
                        );

📌 immer

  • 모듈 상태가 복잡 ⬆ → 불변성 지키기 어려움

    → 모듈의 상태 설계 시, 객체 깊이 너무 깊어지지 않게 주의

    • 객체 깊이 얕음⬆ → 불변성 지킴 & 값 업데이트: 수월
  • 사용 이유

    객체 구조 복잡 & 객체로 이루어진 배열 다룰 때 → 편리한 상태 관리 가능

  • 사용 예시

        const todos = handleActions(
          {
            [TOGGLE]: (state, { payload: id }) =>
              produce(state, (draft) => {
                const todo = draft.todos.find((todo) => todo.id === id);
                todo.done = !todo.done;
              }),
          },
          initialState,
        );
  • 참고 '리액트를 다루는 기술'_저자 김민준
profile
복습 목적 블로그 입니다.

0개의 댓글