reducer 사용 사례

1. 장바구니

• 사용자가 장바구니에 물건을 넣거나 뺄 때.

export const addItem = (item) => { 
     return {
           type: "ADD",
           payload: item
     }
}

export const deleteItem = (items) => {
   return {
       type:"DELETE",
       payload:items
   }
}

const reducer = (state = [], action) => {
    switch(action.type) {
        case "ADD":
            return [...state, action.payload];
        case "DELETE":
            return [...action.payload];
        default: 
            return state;
    }
}

2. 로그인

• 페이지를 새로고침하더라도 로그인이 유지되도록.

export const login = () => { // 로그인 되어있는 경우
	return {
		type: LOGINCHECK,
	};
};

export const logout = () => { // 로그아웃 한 경우
	return {
		type: LOGOUTCHECK,
	};
};

const initialStore = { isLogin: false }; // 우선 false로 초기화

const reducer = (state = initialStore, action) => {
	switch (action.type) {
		case LOGIN: // 로그인 되어있다면 isLogin을 true로 바꿔서 유지되도록.
			return { ...state, isLogin: true };
		case LOGOUT: // 로그아웃 했다면 isLogin을 false로 바꿔서 로그아웃 상태로.
			return { ...state, isLogin: false };
		default:
			return state;
	}
};

3. 효과 주기

• 애니메이션과 같은 효과를 켜거나 끌 때.

function reducer(state = defaultState, action) { 
  if (action.type === 'off') {
    let newState = [...state]; 
    newState[0].animation = false;
    return newState
  } else if (action.type === 'onf') {
    return state
  }
}