redux에 대한 이해와 setting

redux를 들어가며

• redux를 오늘 처음 썼을 때, useReducer와 상당히 유사할 것이라 생각하여 쓰면 되겠지했다..(큰 코를 다쳐버렸다)
• redux를 삽질하면서 꺠달았던 교훈들을 공유하고자 합니다.

redux란?

• redux는 웹에서 보여주는 모든 상태를 관리해줄 수 있는 굉장히 유용한 라이브러리입니다.
• redux는 다음과 같은 특징을 지닙니다.
  • 전역 상태를 보관하는 저장소(store)
  • 상태 저장소에 접근을 위한 리듀서(reducer)
  • reducer에 행동을 지시하는 action
  • 저장소에 보관된 상태를 가져오는 서브스크립션으로 나뉘어져 있습니다.

redux 메커니즘

- 전역 저장소에 상태 관리
- 상태는 action이 발생하면 reducer가 상태에 접근해서 action에 따라 다른 상태변화를 일으킵니다.

- 위의 사진은 redux를 한 눈에 볼 수 있도록 그림으로 보여준 것입니다.
- 위의 사진을 토대로 하나하나 자세하게 알아보겠습니다.

store

• 전역 상태를 저장합니다.
• 하나의 어플리케이션에 하나의 저장소만 존재해야합니다. 리액트에서는 주로 index.js에 정의합니다.
• 소스코드에서 const store = createStore(reducer)가 store를 생성하는 부분입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from '@src/App';
import { createStore } from 'redux';
import reducer from '@src/stores';
import { Provider } from 'react-redux';

const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
  <App />
</Provider>,
document.getElementById('root')
);

reducer

• 저장소에 유일하게 접근할 수 있는 객체입니다.
• action에 따라 행동합니다.
• 소스코드에서 state와 action에 대한 간단한 타입을 설정하고 action의 type에 따른 상태변화를 switch를 통해서 구현하였습니다.

const reducer = (
state = initialState,
action: ChangeDropdownStateActionType
): IState => {
switch (action.type) {
  case DROPDOWN_STATE:
    return {
      ...state,
      isDropdownShow: !state.isDropdownShow,
    };
  default:
    return state;
}
};

action

• action은 reducer에게 보내지는 저장소에 대한 행동입니다.
• 트리거(trigger) 역할이라고 볼 수 있습니다.

import { ChangeDropdownStateActionType, DROPDOWN_STATE } from './types';

export const ChangeDropdownDrawer = (
  isDropdownShow: boolean
): ChangeDropdownStateActionType => {
  return {
    type: DROPDOWN_STATE,
    isDropdownShow,
  };
};

redux setting

• redux setting은 다음과 같은 라이브러리를 설치하면 됩니다.
• redux, react-redux, @types/react-redux

블로그 참고

• https://velog.io/@cada/React-Redux-vs-Context-API
• https://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/
• https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt
• https://medium.com/@seungha_kim_IT/typescript-%EC%B5%9C%EC%8B%A0-%EA%B8%B0%EB%8A%A5%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-redux-%EC%95%A1%EC%85%98-%ED%83%80%EC%9D%B4%ED%95%91-ef46fff8850b