TP:BCSD - Account&Calendar / 2021-07-18

Redux에서 Redux Toolkit으로

 

(1) CreateAction 이용하기

Action을 생성해주는 함수를 Redux-Toolkit을 이용해서 변경해 보자

createAction 함수를 이용해서 새로운 Action을 생성해준다.

음.. 이 Action에는 무엇이 들어 있을까?

출력해보자

웬 함수가 들어있다?

함수를 실행시킨 후 출력해 보자

type과 payload가 들어있다.

이래서 Action 생성함수 이구나

그럼 payload에는 dispatch를 할때 전달받은 인수들을 저장하는 곳이구나

console창에 출력된 결과에 맞게 Btn.type과 dispatch를 통해 전달받은 데이터는 payload 안에 존재하기때문에,

payload를 참조해주었다.

payload에 객체형식의 데이터를 전달하여, 여러개의 데이터를 전달 해 주었다.

 

createAction을 사용하면서 느낀점

기존에 action을 만들어 주는 함수를 따로 만들어서, dispatch할때 사용했는데, createAction함수 단 한줄로 Action함수를 만들지 않아도 된다는 점에서 굉장히 편리하다.

 

createReducer 사용하기

export const incomeExpeditureReducer = createReducer(initialState,(builder)=>{
    builder
        .addCase(INIT,(state,action)=>{
            return {
                list:action.payload.list,
                date :action.payload.date,
                incomeId:action.payload.incomeId,
                expeditureId:action.payload.expeditureId
            }
        })
        .addCase(INCOME,(state,action)=>{
            (state.list).push({
                type:income.type,
                amount:Number(action.payload.amount),
                label:action.payload.label,
                year:action.payload.year,
                month:action.payload.month,
                date:action.payload.date,
                day:action.payload.day,
                id:action.payload.id
            })
        })
        .addCase(EXPEDITURE,(state,action)=>{
            (state.list).push({
                type:expediture.type,
                amount:-1*Number(action.payload.amount),
                label:action.payload.label,
                year:action.payload.year,
                month:action.payload.month,
                date:action.payload.date,
                day:action.payload.day,
                id:action.payload.id
            })
        })
        .addCase(DELETE,(state,action)=>{
            return {
                list:action.payload.list,
                incomeId:action.payload.incomeId,
                expeditureId:action.payload.expeditureId
            }
        })
})

위에서 만들어준 createAction을 이용해서, createReducer를 통해 사용해주었다.

Redux toolkit의 장점은 immutate에서 mutate로 데이터를 변경할 수 있다는 점이다. 물록 immer라는 존재가 Redux toolkit의 immutate를 지켜주긴하지만, 코드상으로 봤을땐 mutate가 가능해졌다.

완전히 새로운 state를 적용할려면 return을 사용 /  기존의 내용에서 추가만 하려면 push를 이용해준다.

 

 

createSlice 사용하기

createAction과 createReducer를 사용했던 부분을 createSlice를 사용해 수정해주었다.

createSlice 내부에는 reducer와 action을 둘 다 사용할 수 있게 해준다.

export const incomeExpeditureReducer = createSlice({
    name:'incomeExpediture',
    initialState,
    reducers:{
        init:(state,action)=>{
            const {list,date,incomeId,expeditureId} = action.payload;
            return {
                list,
                date,
                incomeId,
                expeditureId
            }
        },
        income:(state,action)=>{
            const {amount,label,year,month,date,day,id} = action.payload;
            (state.list).push({
                type:'income',
                amount:Number(amount),
                label,
                year,
                month,
                date,
                day,
                id
            })
        },
        expediture:(state,action)=>{
            const {amount,label,year,month,date,day,id} = action.payload;
            (state.list).push({
                type:'expediture',
                amount:-1*Number(amount),
                label,
                year,
                month,
                date,
                day,
                id
            })
        },
        deletelist:(state,action)=>{
            const {list, incomeId, expeditureId} = action.payload;
            return {
                list,
                incomeId,
                expeditureId
            }
        }
        
    }
})

export const {init,income,expediture,deletelist} = incomeExpeditureReducer.actions;

Action생성함수를 사용하려면 createSlice를 통해 만든 incomExpeditureReducer의 객체에서 actions를 이용해서 선언해줄 수 있다.

 

incomeExpeditureReducer를 출력하면 어떠한 값이 나올까?

보이는 것처럼 actions, reducer라는 key가 있어, 이 key를 이용하면 createAction과 createReducer를 동시에 사용한 것과 같아진다.

 

최종적으로 createSlice를 사용해 보았는데, 정말 효율적이라고 생각한다.