redux toolkit에서 prepare

완두콩·2023년 5월 28일
0

redux/toolkit

목록 보기
5/8

리덕스 툴킷 기초를 복습하면서 나온 prepare.
내가 강의를 듣고 이해한 바에 따르면,
prepare은 slice내에서 reducer함수를 통해 상태가 업데이트 되기 전에
입력될 정보들을 미리 준비시켜주는 것.

prepare 함수는 createSlice의 reducers 객체 내에서 액션 생성자 함수를 정의할 때 사용.
prepare 함수는 액션 생성자 함수의 복잡성을 줄이고 코드를 간결하게 작성하기 위한 도우미 역할.

액션 생성자 함수는 prepare 함수를 사용하여 액션 객체를 생성하는데, prepare 함수는 value를 받아서 payload 필드에 포장하여 액션 객체를 반환한다.

slice.js내에서 아래와 같이 사용된다.

const slice = createSlice({
  name: 'mySlice',
  initialState: initialStateValue,
  reducers: {
    myAction: {
      reducer: (state, action) => {
        // 액션 처리 로직
        state.push(action.payload);

      },
      prepare: (arg1, arg2) => {
        return { payload: { 
        		 id: nanoid(),
        		arg1, 
                arg2,
                date: new Date().toISOString(),

                } };
      },
    },
  },
});

그리고 컴포넌트.js에서 아래와 같이 작성해주면 되어 엄청 간단해진다.

dispatch(myActionCreator(arg1, arg2));

prepare을 쓰지 않았다면, 컴포넌트.js에서 이렇게 적어줘야 하므로

//예시
 const setUser = (user) => {
    dispatch(
      setUserLoginDetails({
        name: user?.displayName,
        email: user?.email,
        photo: user?.photoURL,
      })
    );
  };

prepare를 쓰는 편이 훨씬 간결해진다.

profile
공부하자. 기록하자. 쫌!

0개의 댓글