액션 : 무엇이 일어날지…

  • 애플리케이션에서 스토어로 보내는 데이터 묶음.
  • 액션은 반드시 어떤 형태의 액션이 실행될지 나타내는 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를 반환한다

참고 자료