[개념 잡기] Redux-actions; creationAction & handelActions

1. creationAction 

import { createAction } from "redux-actions";

: 기존 Action Creator는 파라미터로 전달받은 값을 객체에 넣어줄 뿐이었다. 이것을 자동화 시킨 것이 creactionAction 이다.

=> 즉, 액션 생성 자동화! 

[기존 방식]
// Action Creators //액션 객체 만들자(뭐를) 3) 
export function loadWord(word_list) {
    console.log('로드해라!')
    return { type: LOAD, word_list }; //자바스크립트에서는 키와 벨류가 똑같다면 생략가능!
}

export function createWord(word) {
    console.log('추가해라!')
    return { type: CREATE, word };
}

=> 기존엔 이렇게 일일히 객체형식으로 다 써줘야 했지만, 

 

[createAction을 적용시킨 방식]
//action creators
const logOut = createAction(LOG_OUT, (user) => ({ user }));
const getUser = createAction(GET_USER, (user) => ({ user }));
const setUser = createAction(SET_USER, (user) => ({ user }));
//두번째 파라미터에 payload값 나타내줌

=> createAction을 활용하면 알아서 객체에 넣어주기 때문에 간단하게 사용할 수 있다! 

- 이럴 경우, 파라미터값이 불분명 해지기에 파라미터로 전달받은 값을 액션의 payload값으로 설정해준다. 

=> 즉, 액션이 갖는 정보를 payload값으로 통일. 

 

◈ 그렇다면 createAction의 단점은? 

- 어떤 파라미터를 받는지 나와있지 않아 주석처리 해줘야 한다는점! 

 

▶ 두번째 파라미터에 나타내어 주자! 

- 두번째 파라미터에 payload생성 함수를 전달해 코드상으로 나타낼 수 있다!  

 

▶ 결론

=> createAction을 사용하면 직접 객체 형식으로 리턴해주지 않아도 됌! 

 

---

2. handleActions 

import { handleActions } from "redux-actions";

: 기존 reducer에서 쓰던 switch 문은 scope를 reducer 함수로 설정했다. 즉, case내에서 let이나 const로 변수 선언시 같은 이름이 겹칠때 에러가 발생되었다. =>  hadleActions는 그런 것들을 해결!

[기존 방식]
export default function reducer(state = initialState, action = {}) {
    switch (action.type) {
        case 'word/LOAD': {
            // console.log(action.word_list) 
            console.log('로드완료');
            return { list: action.word_list } //아이디값까지 포함된 딕셔너리
        }
        case 'word/CREATE': {
            const new_word_list = [...state.list, action.word] //현재 리스트에 새로운 값 추가 
            console.log('추가완료');
            return { list: new_word_list }
        }

=> case내에서 각각 함수 지정 해줌 

[handleACtions를 사용한 방법]
export default handleActions({
    [SET_USER]: (state, action) =>
      produce(state, (draft) => { //state; 원본값을 준다(바꿔줄 놈), draft; 원본 복사값(어케 바꿀건가)
        draft.user = action.payload.user;
        draft.is_login = true;
      }) 
  },
  initialState
);

=> 첫 번째 파라미터에는 액션에 따라 실행할 함수들을 가진 객체들을 적어주고 

     두 번째 파라미터에는 초기값(initialState)를 적어준다.