redux에 대한 이해와 setting - boostcamp-2020/Project15-A-Client-Based-Formula-Editor GitHub Wiki

redux를 들어가며

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

redux란?

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

redux 메커니즘

- 전역 저장소에 상태 관리
- 상태는 action이 발생하면 reducer가 상태에 접근해서 action에 따라 다른 상태변화를 일으킵니다.
스크린샷 2020-11-25 오전 12 09 25 
- 위의 사진은 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

블로그 참고

⚠️ **GitHub.com Fallback** ⚠️