리덕스(Redux) 와 리덕스의 구성요소

리덕스를 사용하게 될 때 앞으로 접하게 될 keyword 입니다.

| 1. Action

상태에 어떠한 변화가 필요하게 되면, action을 발생시킵니다. (= 하나의 객체)

{
    type:"TOGGLE_VALUE"
}

위와 같은 객체형태로 이루어져있습니다.

액션 객체는 type 필드를 필수적으로 갖고 있어야 하며, 그 이외 속성값들은 개발자가 마음대로 추가할 수 있습니다.

예를들어,

{ 
    type:"ADD"
    ,data : {
        id : 0
        ,text : "이런식으로 말이죠 "
    }

}

위와 같은 방법으로 구성할 수 있습니다.

| 2. 액션 생성함수 (Action Creator)

액션 생성함수는, 액션을 만드는 함수입니다.
단순히 파라미터를 받아와서 액션 객체 형태로 만들어줍니다.

export funtion addTodo(data){
    return {

        type:"ADD"
        ,data
    };
}

// arrorw function 으로 만들 수 있습니다.
export const changeInput = text => ({
    type : "CHANGE_INPUT"
    ,text 
});

| 3. 리듀서 (Reducer)

리듀선는 변화를 일으키는 함수입니다.
리듀서는 두 가지의 파라미터(state, action) 를 받아옵니다.

//두 가지의 파라미터 state 와 action

function reducer(sate,action){
    //상태 업데이트 로직
    return alteredState;
}

리듀서는 현재의 state(상태)와 전달받은 action 을 참고하여 새로운 상태를 만들어 반환합니다.
useReducer 와 같은 형태를 가집니다.

useReducer와 Redux의 reducer의 차이점

useReducer

function reducer(state,action){
    switch(action.type){
        case "test":{
            return {
                 state +1;   
            }
        }

        default:
            return throw new Error("~~~");
    }
}

일단 uesReducer 같은 경우에는 default의 return을 new Error 인 형태로 에러를 발생시켜 reutrn 해줍니다.,

하지만, Redux의 reducer 에서는 default return을 **state** 그상태 그대로 반환하도록 작성해야합니다.

리덕스를 사용할 때, 여러개의 reducer 를 만들고 합치는 작업을 할 수 있습니다.

최상위 리듀서 : root reducer
최상위 안의 리듀서 : sub reducer

라고 부릅니다.

| 4. 스토어(Store)

리덕스(redux)에서는 한 애플리케이션당 1개의 스토어(store)를 만듭니다.
스토어 안에는, 현재의 App 상태, reducer, 내장함수들이 들어있습니다.

| 5. 디스패치(Dispatch)

디스패치는 스토어(store)의 내장함수 중 하나입니다.
dispatch는 action을 발생 시키는 것이라고 쉽게 생가하시면 됩니다.
dispatch 라는 함수는 action 을 파라미터로 전달합니다

dispatch(action)

위와 같은 형태로 전달합니다.

| 6. 구독(subscribe)

subscribe 함수는, 함수 형태의 값 을 파라미터로 받아옵니다.
subscribe 함수에 특정 함수를 전달해주면, action 이 dispatch 되었을 때 마다 전달해준 함수가 호출됩니다.

React에서는, Redux를 사용할 때 보통 이 함수를 직접 사용하는 일은 없습니다.
대신, react-redux 라는 라이브러리에서 제공하는 connect 함수는 useSelector Hook을 사용하여 Redux Store의 상태에 구독합니다.

 

 

combineReducer

여러개의 리듀서를 하나로 합쳐주는 역할을 합니다.

| 프리젠테이셔널

프리젠테이셔널 컴포넌트란 리덕스 스토어에 직접적으로 접근하지 않고 필요한 값 또는 함수를 props 로 받아와서 사용하는 컴포넌트입니다.

| 컨테이너 컴포넌트

컨테이너 컴포넌트란, 리덕스 스토어의 상태를 조회하거나, 액션을 디스패치 할 수 있는 컴포넌트를 의미합니다.
그리고 HTML 태그들을 사용하지 않고 다른 프리젠테이셔널 컴포넌트들을 불러와서 사용합니다.