Redux

• 2KB의 작은 라이브러리

store

redux에서는 store가 모든 부분을 총괄

• 모든 어플리케이션의 state는 store 안에 존재

• Redux를 시작하려면 state를 포함하고 있는 store 만들기

• store 안에서 어플리케이션의 state는 하나의 불변의(immutable) 객체(object)로 존재

• store는 action을 받는 즉시 reducer를 작동

• store 내장함수

  • getState(): 현재 state를 반환
  • dispatch(): action을 reducer에게 전달
  • subscribe(): store가 변할 때마다 호출
    • store.subscribe(()=>console.log(store.getState()))

reducer

state와 action을 받는 순수 자바스크립트 함수

• Redux에서 state는 전적으로 reducer로부터 받아야(return) 함

• React에서 state는 setState로 변경하지만, Redux에서는 불가능

action

state를 바꾸는 유일한 방법은 store에 action 신호를 보내는 것

• Redux에서 reducer는 어플리케이션의 state를 제공

  • 이때 reducer가 언제 제공되어야 하는지 알려줌

• "action을 dispatch한다" === "신호를 보내 처리한다"

• state를 바꾸는 방법

  • 현재 state를 복사 후 새 데이터를 추가하여 새로운 state를 만듦

• action은 단지 자바스크립트 객체

• 속성

  • type: state가 어떻게 변해야 하는지 상수로 선언
  • payload: 새로운 객체, reducer는 나중에 이 객체를 현재의 state에 추가

• action creator: 모든 action 함수를 감싸는 최선의 방법

react-redux

효율적으로 React와 Redux를 묶어(binding) 주는 작은 라이브러리

• method

  • connect: React 컴포넌트와 Redux store를 연결
    • mapStateToProps(): Redux state를 React 컴포넌트의 props와 연결
    • mapDispatchToProps(): Redux action을 props와 연결

• Provider

  • Redux와 React의 연결하기 위한 high order component
  • React 어플리케이션을 감싸서 Redux의 store를 인식

useSelector

react-redux의 useSelector

• connect함수를 이용하지 않고 리덕스의 state를 조회

useDispatch

react-redux의 useDispatch

• 생성한 action을 useDispatch를 통해 발생
• 만들어둔 action creator 함수를 import