유데미 취업부트캠프 - 프론트엔드&백엔드 : 36일차 TIL

 

immer

배열이나, 객체같은 불변성 타입을 가진 state를 업데이트 하기위해선, 스프레드 연산자 (...)를 사용해야 했다.

하지만 depth가 큰 객체를 깊은 복사를 하기엔 스프레드 연산자로 개발자 입장에선 굉장히 힘든일이다.

 

✨immer를 사용하면, draft를 주는데 깊은 복사가  된 객체이다!

 

[기존의 방식]

else if (action.type === ADD_FRIEND) {
    const newFriend = action.payload;
    const newState = { ...state, friends: [...state.friends, newFriend] };
    return newState;

 

[immer]

const newState = produce(
      (state,
      (draft) => {
        const newFriend = action.payload;
        draft.friends.push(newFriend);
      })
    );

깊은 복사가 된 draft에 새로운 값을 push만 해주면된다!

 

✓ produce 함수:  새로운 상태를 생성하는데 사용됩니다. 첫 번째는 현재 상태이고, 두 번째는 업데이트를 수행하는 함수입니다.

 

 

 

createReducer

createReducer를 사용하면, 자동으로 immer을 사용해 mutate하게 배열,객체 state를 변경할 수 있다.

state.todos[3].completed = true

새로운 state를 리턴할 수 있고, mutate하다!

switch 안쓰게해줌! 

 

새로운 state가 아니면 아무것도 리턴하지 않는다?

push는 리턴하지 앟는다? mutate하게 해준다?

filter는 새로운 array를 리턴한다. mutate가 아니라

 

createSlice

reducer의 함수 객체, 슬라이스 이름 store, initalstate , action.type, action creator 등

기존에 다 작성해야했지만, Slice로 간략하게 쓸 수 있다.

✓ 간단한 리듀서 및 액션 생성자를 생성하는 데 사용되는 헬퍼 함수

 

import { createSlice } from '@reduxjs/toolkit';

const friendsSlice = createSlice({
  name: 'friends',
  initialState: { friends: [] },
  reducers: {
  	//actions들
    addFriend: (state, action) => {
      const newFriend = action.payload;
      state.friends.push(newFriend);
    },
  },
});

//actionCreator함수 export
export const { addFriend } = friendsSlice.actions;
export default friendsSlice.reducer;

 

❗️ immer를 내부적으로 사용하여 불변성을 유지합니다.

 

//store.js

import { configureStore } from '@reduxjs/toolkit';
import friendsReducer from './friendsSlice';

const store = configureStore({
  reducer: {
    friends: friendsReducer,
  },
});

// 사용 예시
store.dispatch(addFriend({ name: 'John' }));

 

이 리듀서 슬라이스를 Redux 스토어에 등록하면, immer가 내부적으로 사용되어 상태의 변경을 안전하게 처리한다.

 

createAction

action creator 함수 생성

 

 

API

• configureStore(): createStore단순화된 구성 옵션과 적절한 기본값을 제공하기 위해 래핑됩니다. 자동으로 슬라이스 리듀서를 결합하고, 제공하는 Redux 미들웨어를 추가하고, redux-thunk기본적으로 포함하며, Redux DevTools Extension을 사용할 수 있습니다.
• createReducer(): 스위치 문을 작성하는 대신 Case Reducer 함수에 작업 유형의 조회 테이블을 제공할 수 있습니다. 또한 자동으로 라이브러리 immer를 사용 하여 state.todos[3].completed = true.
• createAction(): 주어진 액션 유형 문자열에 대한 액션 생성기 함수를 생성합니다.
• createSlice(): 리듀서 함수의 객체, 슬라이스 이름, 초기 상태 값을 받아들이고 해당 액션 생성자와 액션 유형을 사용하여 슬라이스 리듀서를 자동으로 생성합니다.
• combineSlices(): 여러 슬라이스를 단일 리듀서로 결합하고 초기화 후 슬라이스의 "지연 로딩"을 허용합니다.
• createAsyncThunkpending/fulfilled/rejected: 작업 유형 문자열과 약속을 반환하는 함수를 받아들이고 해당 약속을 기반으로 작업 유형을 전달하는 썽크를 생성합니다.
• createEntityAdapter: 저장소에서 정규화된 데이터를 관리하기 위해 재사용 가능한 리듀서 및 선택기 세트를 생성합니다.
• 사용하기 쉽도록 다시 내보낸 Reselect 라이브러리 의 유틸리티 createSelector입니다 .