Redux 기반 베이스 [그림의 이미지]

4762 단어 React

출력 배경

  • Redux를 배울 때 React만 사용하면state를 사용하여 상태를 관리할 수 있지만 Redux(= 다른 라이브러리)가 왜 필요한지 모르는 배경이 있기 때문에 출력합니다.
  • 이번에는 개념중심(추론 예정)

    • 이중화

  • Redux는 프런트엔드 상태 관리를 위한 라이브러리입니다.

    • 불필요한 장면 필요

  • 상태 관리가 복잡한 장면
  • 소규모 응용은 물론state도 충분히 관리할 수 있다.
  • 그러나 응용이 커지면 구성 요소 트리가 커지고 상태 관리가 복잡해진다.

    • 상태 관리가 복잡해질 때?

  • 빈대의 원인
  • 부모 구성 요소에서 상태를 제한하고 관리하려면 큰state가 되고'상태의 업데이트와 취득'이 복잡해져 잘못된 계기가 된다.
  • 단순한 관리의 번거로움
  • 통식 계전기가 곳곳에서 발생하고 관리도 어려워져 문제가 되고 있다.
  • 정보 전달 어려움
  • 각 구성 요소에 자신의state가 있으면 다른 구성 요소에 상태를 알리기 어려워 복잡해진다.

    • Redux를 사용하여 상태 분리

  • Redux를 사용하면 상태 관리와 관련된 부분을 구성 요소의 트리에서 분리할 수 있습니다.
  • 또한 복잡한 통형 계전기에서 해방(완전 해방은 아니지만 부하가 감소)되거나 조합 간의 상태의 교환이 가능하다.

    from https://css-tricks.com/learning-react-redux/

    • 이중화 기능

  • 개념:reduxflux 기반의 개념 디자인
  • flux의 두 가지 특징
  • 은'상태가 한 방향으로 흐른다'는 특징을 가지고 있다.
  • 또한 "직접적으로 값을 변경하지 않는"함수형의 특징을 가지고 있다.

    • Redux의 등장인물



    Store

  • 애플리케이션 상태를 유지하는 스토리지의 위치입니다.
  • 코드로 직접 설명하는 부분이 거의 없다
  • Redux의 상태 자체가 Store라고 불리는 대상입니다.여기에는 각 Reducer에 해당하는 State가 중첩되어 있습니다.
  • Reducer를 통해서만 스토어를 변경할 수 있음
  • Store는 언제든지 getState 방법을 통해state에 접근할 수 있습니다.
    • Javascript
    console.log(store.getState())

    Action type

  • Reducer나middlware가 어떤 처리를 하는지 판단하는 데 사용됩니다.
  • 값을 직접 바꿀 수 없기 때문에 이런 방법을 채택한다.상수나 typescript라면 대부분은enum로 정의됩니다.(자신의 Typescript·enum은 아직 학습 범위에 있지 않기 때문에 필기로 기재)
    • Javascript
    const ACTION_TYPE = "ACTION_TYPE";

    ActionCreator

  • Action 작성 방법
  • Flux의 ActionCreator와 달리 Action만 만들고 Store에 대한 dispatch는 하지 않습니다.

    • Action

  • Action은 Store에 "뭘"정보를 제공하는 객체(함수)입니다.
  • dispatch (= Redux) Action이 감지되면 State 파수꾼 (= Reducer) 업데이트, Redux 프로세스 실행
  • Action에는 type 속성이 있어야 합니다.
    • Javascript
    {
    type: "アクションの種類を識別できる文字列またはシンボル",
    payload: "アクションの実行に必要なデータ（引数）",
}

    Reducer

  • payload와 이전state를 수신하고 다음state의 함수를 되돌려줍니다.
  • Reducer는 저장소에 등록된 함수
    • 입니다.
  • Redux의 함수는 Reducer를 통과하지 않으면 업데이트할 수 없는 구조입니다.
  • 상태를 업데이트하는 방법은 일반적으로 Action type에서 조건 분기를 진행합니다.
    • Javascript
    {
const reducer = (state = initState, { type, payload }) => {
  switch (type) {
    case ACTION_TYPE:
      return newState(payload);
    default:
      return state;
  }
};

    다음

  • 개념을 중심으로 기재했기 때문에 그 다음에 구체적인 처리 내용을 추가로 기재한다.
  • React-redux 관련 추가 예정
    • 내가 배운 10가지 - 미치지 않는 기원
    echart

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage