35일차 TIL (React 심화주차, Redux Toolkit)

Redux Toolkit
기존의 Redux를 개량한 것으로 -
코드를 더 적게 더 편하게 쓰기 위한 기능들을 흡수하여 만든 것을 리덕스툴킷

줄여서 RTK

createStore 보다는 configureStore 를 추천함. 이유는 이렇게 , 

// 일반 리듀서 사용  (API 두개를 사용)
// const rootReducer = combineReducers({
//     counter,
//     users,
// });

// Redux Toolkit 사용 (API 하나만으로 충분)
const store = configureStore({
    reducer : {
        counter : counter,
        users : users,
    }
});

+ 타입핑이 너무 많다 / 불필요하다라는 의견을 적극 수용하여
한번에 만들 수 있는 API 제공 [slice]
createSlice ();     actionCreator 와 reducer를 한 번에 생성 가능하게됨


// action value 도 필요 없어짐/
export const plusOne = "counter/plusOne";
export const minusOne = "counter/minusOne";
const plus_N = "counter/plus_N";
const minus_N = "counter/minus_N";

////
const counter = (state = initialState, action) => {
    switch (action.type) {
        case plusOne:
            return {
                number: state.number + 1,
            };
        case minusOne:
            return {
                number: state.number - 1,
            };
        case plus_N:
            return {
                number: state.number + action.payload,
            };
        case minus_N:
            return {
                number: state.number - action.payload,
            };
        default:
            return state;
    }
};
export default counter;




// 여기만 있으면 됨
const counterSlice = createSlice({
    name: "counter",
    initialState: "initialState",
    reducers: {
        addNumber: (state, action) => {
            state.number = state.number + action.payload;
        },
        minusNumber: (state, action) => {
            state.number = state.number - action.payload;
        },
    },
});



export default createSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;




불변성을 유지시켜줘야한다.
.reduce : 불변성을 유지
.push : 불변성 mutate - 불변성 유지 불가;
react가 인식할 수 없음,
노올랍게도 Redux toolkit 안에서는 state.push(action.payload); 로 입력하더라도
인식을 함;
이유는 redux toolkit 안에 immer라는 기능이 내장되어 있어서 그래 -
return으로 새로운 객체를 리턴하는 등 여러 공정의 로직을 대신 간편하게 처리해주는
귀여운 녀석이 탑재되어있어서
 Redux toolkit은 DevTools는 state가 다양하고 많이 변경되는데
이 모든 사항을 DevTools는 편리하게 이용하게 해준다, DevTools 때문에 react를 사용한다고 할 정도로 유용한 친구이다.

Flux pattern
Flux와 redux의 관계도 이해


# json - server : fake sever / mock sever로
DB와 API 서버를 생성해주는 패키지로 우리가 백엔드에서 실제 db와 api sever가 구축될 때까지 프론트 엔드 개발에 임시적으로 사용할 data를 생성하기 위해 사용한다.
일종의 test 용임.

// HTTP :
통신의 개념 communication 서버(웹 서버) 와 클라이언트(웹 브라우저)간의 대화

웹통신은 약속 = (프로토콜) 이며
약속된 방식으로 서로 데이터를 주고 받아야만 오류가 없겠죠?

웹에서 서버 <-> 클라이언트간 주고 받은 상호간의 약속을 HTTP 프로토콜이라 칭함
웹에서는 브라우저와 서버가 데이터를 주고 받기 위해 HTTP 프로토콜을 사용하고 있다

서로간 요청(Request)과 응답(Response)
메서드 :
GET - 조회
POST - 생성
PUT, PATCH - 수정 변경
DELETE - 삭제 
요정도
응답 상태코드는 
1xx(정보) : 요청을 받았으며 프로세스를 계속 진행
2xx(성공) : 요청을 성공적으로 받고 인식했으며 수용함
3xx(리다이렉션) : 요청 완료를 위해 추가적인 작업 조치가 필요
4xx(클라이언트 오류) : 요청의 문법이 잘 못되었거나 요청을 처리할수없음
5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패함;