[React.js] Reducer - index.js prev ver. [zerocho님 강의]

import { HYDRATE } from 'next-redux-wrapper';

// const initialState = {
//     name: 'hailey',
//     age: 29,
//     password: 'babo'
// }

// 6. 초기 데이터에 대한 구조를 잡아 두어야 한다.
// initialState = 중앙저장소의 초기값
const initialState = {
    user: {
        isLoggedIn: false,
        user: null,
        signUpData: {},
        loginData: {},
    },
    post: {
        mainPosts: [],
    }
};

// 7. Login Action
// data가 동적으로 바뀔 수 있도록
export const loginAction = (data) => {
    return {
        type: 'LOG_IN',
        data,
    }
}

// 8. Logout Action
export const logoutAction = (data) => {
    return {
        type: 'LOG_OUT',
    }
}

// 5. async action creator(Redux-Saga)


// const changeNickname = {
//     type: 'CHANGE_NICKNAME',
//     data: 'boogi',
// }
// 2. 위처럼 하나하나 data를 바꾸어주면 중복 코드 다수 발생
// 액션을 만들어주는 함수를 만든다.
// ★ 동적으로 액션을 생성해주는 Action Creator
const changeNickname = () => {
    return {
        type: 'CHANGE_NICKNAME',
        data,
    }
}

changeNickname('boogicho')
// 3. 위 함수는 아래와 같다.
// const changeNickname = {
//     type: 'CHANGE_NICKNAME',
//     data: 'boogi',
// }

// 4. dispatch
store.dispatch(changeNickname('mighty tak'))
// 1번 rootReducer에 action.data에 쏙 들어갈 것이다.

// 1. (이전 상태, 액션) => 다음 상태 로 만들어주는 함수
// Reducer : 차원 축소(이전 상태를 받아서 하나로 축소)
// 10. Action이 많아지면 Reducer가 길어진다. 이것을 쪼갤 수 있다.
const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_NICKNAME':
            return {
                //state.name = 'boogi'; // 메모리 낭비! 
                ...state,
                name: action.data,
            }
        // 8. 추가
        case 'LOG_IN':
            return {
                ...state,
                user: {
                    ...state.user,
                    isLoggedIn: true,
                    user: action.data,
                }
            };

        // 9. LOG_OUT 추가
        case 'LOG_OUT':
            return {
                ...state,
                user: {
                    ...state.user,
                    isLoggedIn: false,
                    user: null,
                }
            };
        
        // 10. HYDRATE 추가
        case HYDRATE:
            console.log('HYDRATE', action);
            return { ...state, ...action.payload };
    }
};

export default rootReducer;