27일차 TIL (Redux / store)

숙련주차 과제는 지난주 개인 과제에서 디벨롭하는 거였다.

숙련주차 강의에서 배운 내용 그대로 적용하는건데 꽤 헤매이는 부분이 생겼다.

강의가 많고 길어서 내용을 곱씹어서 삼키는데 시간이 많이 할애됐다.

그래도 나름 아는 부분이여서 호기롭게 시작했는데 왜 안되는지 답답했다.

• styled-components
• React-router-Dom
• Redux 
    - type 과
    - payload :
      * action 객체라는 것은 action type을 payload만큼 처리하는 것이다
      * ex : payload가 3이다 . 3만큼 plus사용 

위 항목들을 충족 시키면 되는 레벨 2

또 다른 과제인 레벨 3이 있었다.

우선 각 컴포넌트를 나누고 저장소에서 하나하나 조합하고 불러오는 작업인데, 어질어질하다.

 

혼자 작업할 때는 어려웠는데, 만든 작업에다 덮어 씌운다고 생각하니 설계부터 망가진거 같았다.

한참을 새벽까지 헤매이다 팀원 분의 깃허브를 뜯어보고 물어보고 방향을 다시 잡았다. 그래서 다시 작업했다.

 

불러와서 list에 모두 제대로 나오는데 어떤 버튼이라도 누르면 오류가 발생했다.

 

우선 수행하게 될 action을 정의, 생성하고 Reducer를 통해 수행시키게 todo를 작성했다.

 

// action value
const TOGGLE = "todosSet/TOGGLE";
const ADDON = "todosSet/ADDON";
const DELETEON = "todosSet/DELETEON";

// 기본 배열 선언

const initialState = [
    {
        id: uuid(),
        title: "React 강의",
        content: "정리해서 분할 학습하기",
        isDone: false,
    },
    {
        id: uuid(),
        title: "Java Script 문제",
        content: "기본부터 순서대로",
        isDone: false,
    },
];
// action creator : action value를 return 하는 함수
export const toggleTodo = (payload) => {
    return {
        type: TOGGLE,
        payload,
    };
};
export const addTodo = (payload) => {
    return {
        type: ADDON,
        payload,
    };
};
export const deleteTodo = (payload) => {
    return {
        type: DELETEON,
        payload,
    };
};

//리듀서 : 함수(state에 변화를 일으키는 함수)
// - stae를 action의 type에 따라 변경하는 함수

// input : state, action을 받는다
// action 객체라는 것은 action type을 payload만큼 처리하는 것이다
// ex : payload가 3이다 . 3만큼 plus
const todosSet = (state = initialState, action) => {
    switch (action.type) {
        case ADDON:
            return [...state, action.payload];
        case TOGGLE:
            return state.map((todo) => {
                if (todo.id === action.payload) {
                    return { ...todo, isDone: !todo.isDone };
                }
                return todo;
            });
        case DELETEON:
            return state.filter((todo) => {
                return todo.id !== action.payload;
            });
        default:
            return state;
    }
};

export default todosSet;

 

payload 라는 정의가 와닿지 않아서 활용을 못 하고 있었다.

data 그 자체로 이해하고 console.log() 로 찍어보면서 값을  확인해서 넣어줬다.

강의를 토대로 들어가야할 List js파일에 입력하고 제 값들의 자리를 잘 찾아가는거 같아서 그런가 보다 했는데,

조금 더 명확하게 알고 계신분의 설명을 듣고 더 명확해진거 같다.

 

const initialState = [
    {
        id: uuid(),
        title: "React 강의",
        content: "정리해서 분할 학습하기",
        isDone: false,
    },
    {
        id: uuid(),
        title: "Java Script 문제",
        content: "기본부터 순서대로",
        isDone: false,
    },
];

// * action value
const TOGGLE_ON = "todos/TOGGLE_ON";
const ADD_ON = "todos/ADD_ON";
const DELETE_ON = "todos/DELETE_ON";

export const toggles = (payload) => {
    return {
        type: TOGGLE_ON,
        payload,
    };
};
export const addTodo = (payload) => {
    return {
        type: ADD_ON,
        payload,
    };
};

export const delets = (payload) => {
    return {
        type: DELETE_ON,
        payload,
    };
};

// * 리듀서
//리듀서는 Action 등의 일거리를 직접 수행하는 놈
const todos = (state = initialState, action) => {
    switch (action.type) {
        case TOGGLE_ON:
            return state.map((todo) => {
                if (todo.id === action.payload) {
                    return { ...todo, isDone: !todo.isDone };
                }
                return todo;
            });
        case ADD_ON:
            return [...state, action.payload];
        case DELETE_ON:
            return state.filter((todo) => {
                return todo.id !== action.payload;
            });
        default:
            return state;
    }
};

export default todos;

 

육안으로 봐도 변수명만 다르지 문제점은 없었다.

그래도 일으킬만한 휴먼에러가 있을 거 같아서 다 찍어봤는데도

하도 에러를 일으켜서 다시 짜봤는데 보내주는 reducer 문제가 아니었다.

각 component 내부에서 받을 때의 type의 문제였었다.