Redux 공식 사이트에서 학습한 내용 정리

액션 : 무엇이 일어날지…

  • 애플리케이션에서 스토어로 보내는 데이터 묶음.
  • 액션은 반드시 어떤 형태의 액션이 실행될지 나타내는 type 속성을 가져야 한다

액션 생성자: 액션을 만드는 함수

  • flux 에서는 액션 생성자가 액션을 전달해서 dispatcher 를 호출 하지만, redux 에서는 액션을 반환
  • 액션은 어떤 일이 일어났는지는 알려주지만, 애플리케이션 상태를 어떻게 바꿔야 하는지는 알려주지 않는다

액션을 다루기 전에..

  • 애플리케이션의 상태(데이터)가 어떤 모양이 될 지 설계해야 한다

리듀서 : 액션에 따라 상태를 수정

  • 액션을 보냈을때 상태가 어떻게 변하는지 명시
  • 이전 상태와 액션을 받아서 다음 상태를 반환하는 순수 함수
  • 리듀서는 반드시 순수 해야만 한다.
    • 인수를 변경하는 행위, 예기치 못한일, 사이드 이펙트, API 호출 같은거 하면 안된다
  • 인수가 주어지면 다음 상태를 계산해서 반환하기만! 하면 된다

스토어

  • 액션과 리듀서를 가져온다
  • 어플리케이션에서 단 하나의 스토어만 가질 수 있다

React 와 연결

  • react 바인딩을 위해서 추가 패키지 설치가 필요하다 $ npm install –save react-redux
  • 최상위 컴포넌트만이 redux 에 바인딩 된다
  • 하위 컴포넌트들은 어디서 데이터가 오는지, 어떻게 바꾸는지 모른다
  • 1단계, 최상위 컴포넌트(App)을 react-redux 의 <Provider> 로 감싸면 컴포넌트에서 스토어 인스턴스 에 접근할 수 있게 된다
  • 2단계, redux 와 연결하고 싶은 컴포넌트(최상위 컴포넌트)를 react-redux connect 함수로 감싸준다
    connect는 컴포넌트의 props로 dispatch 함수를 전달한다
    connect의 유일한 인수는 selector 라고 부르는 함수인데, 전역 redux 스토어의 상태(state)를 받아서 컴포넌트가 필요로 하는 props를 반환한다

참고 자료


comments powered by Disqus
TAGS
On this page