[React] 리덕스

Redux

• 리액트 상태 관리 라이브러리
• 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리
• 컴포넌트끼리 똑같은 상태를 공유할 때 여러 컴포넌트를 거치지 않고 전달하거나 업데이트 가능

필요성 파악하기

• Root 컴포넌트에는 something 이라는 상태 값이 있고, onDoSomething 이라는 함수가 something 값에 변화를 준다.

• onDoSomething 은 Root -> B -> H 로 전달되고, H 에서 이벤트가 발생하여 이 함수가 호출되면 something 이 Root -> A -> E -> F 로 전달된다.

props 가 필요한 곳으로 제대로 전달되게 하기 위하여, 실제로는 해당 props 를 사용하지 않는 컴포넌트를 거쳐가야 한다는 것은 리렌더링 하게 될 때 비효율적이기도하고, 굉장히 귀찮은 작업

리덕스가 있다면, 다음과 같은 구조로 작업을 진행 할 수 있게 됩니다.

앱이 지나고 있는 상태와 상태변화 로직이 들어있는 Store를 통하여 우리가 원하는 컴포넌트에 원하는 상태값과 함수를 직접 주입해줄 수 있게 된다.

📖 개념정리

액션 (Action)

• 상태에 어떠한 변화가 필요하게 될 때 객체 형태의 액션을 발생시킨다.
• 액션 객체는 type 필드를 필수적으로 가진고
• 추가적으로 필요한 객체의 요소들은 필요에 의해 추가될 수 있다.

{
  type: "TOGGLE_VALUE"
}

액션 생성함수 (Action Creator)

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

function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

리듀서 (Reducer)

• 리듀서는 변화를 일으키는 함수입니다.
• 리듀서는 state(이전상태), action을 파라미터를 받아온다.
• 일반적으로 switch문을 통해 action의 타입을 구분해주고 반환값은 로직에 의해 변화된 상태값을 반환한다.

export const numberReducer = (state = initialState, action) => {

  switch (action.type) {
    // type에 따라 로직 구분

    case "INCREASE":
      //설정한 state를 수정 (store state 변경) 하고  결과를 바로 return한다.
      return {
        ...state,
        number: state.number + 1,
      };

    case "DECREASE":
      return (state = {
        ...state,
        number: state.number - 1,
      });

    case "INCREASE_FIVE":
      return (state = {
        ...state,
        number: state.number + action.data,
      });

    //그냥 값 호출
    default:
      return state; 
  }
};

리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환합니다.

스토어 (Store)

• 리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다.
• 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.

디스패치 (dispatch)

• 디스패치는 스토어의 내장함수 중 하나이다.
• 디스패치는, 액션을 발생 시키는 것 이라고 이해하면 된다.
• dispatch 라는 함수에는 액션을 파라미터로 전달한다(dispatch(action) 이런식으로)

그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줍니다.

ex) 

<button onClick={() => dispatch(increaseAction())}>증가하기</button>
<button onClick={() => dispatch(decreaseAction())}>감소하기</button>
<button onClick={() => dispatch(increaseOtherAction(5))}>5 더하기</button>

구독 (subscribe)

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.

👉👉 정리

1. submit을 눌렀을 때, 객체 하나를 전송한다. 이때 이 객체를 action이라고 한다.
2. 이 action은 dispatch에 전달된다.
3. dispatch는 2가지 일을 한다.

• reducer를 호출해서, state 값을 바꾼다.
  • reducer에 현재의 state 값과, action을 값이 주어진다.
  • reducer의 return 하는 객체는 state의 새로운 값이 된다.
  • reducer는 state를 입력 값으로 가지고, action을 참조해서, 새로운 state 값을 만들어서, return 해주는 state를 가공해주는 가공자이다.
• subscribe에 등록되어 있는 구독자들을 다 호출해줍니다. 그러면 render가 호출 됨

4. 그러면 render가 호출이되면서 getState가 새로운 state값을 가져온다음에 redner가 화면을 갱신해 주면 새로운 state의 맞게 ui가 바뀌게 됩니다.

핵심은 state!!
state를 기반으로 화면을 그려준다는 것이고
state값에 직접 접근하면 안되기때문에 getState를 통해 값을 가져오고,
dispatch를 통해 값을 변경시키고
subscribe를 이용해서 값이 변동됬을때 구동될 함수들을 등록해준다는 것입니다.
reducer를 state값을 변경한다