Redux

대규모 어플리케이션에서 발견된 MVC의 한계점을 보완하기 위해 고안된 FLUX 아키텍처를 구현한 라이브러리

Redux의 4요소는 액션, 디스패처, 리듀서, 스토어 이다.

Redux 4요소

Action

• type 상수를 통해 액션 생성자 함수를 호출하는 방식
• 하지만 디스패치를 호출까지는 하지 않고 액션 그 순간을 만드는 역할만 함
• 비유하자면 OMR 기계에 넣기 전 작성된 OMR 카드

Dispatcher

• 디스패치는 스토어의 dispatch 메소드로 실행가능

Reducer

주의사항

• reducer에 넣은 state를 직접 수정하는 것은 불가하다
• 구조분해 할당이나 Object.assign등을 사용해 새로운 객체를 만들어 수정해 리턴하는 방식을 취해야 한다
• case로 커버하지 못하는 액션 타입에 대응하기 위해 default로 기존 state를 그대로 반환하도록 해야한다

동작 설명

• 위에서 생성된 addToDo로 예를 들자면 type이 ADD 이므로 'case ADD' 에 해당하는 로직을 실행하게 된다.

Store

• createStore를 선언함으로 store를 만들 수 있고 만든 reducer를 통해 state에 액션을 디스패치할 수 있다.
• store에 있는 getState()를 통해 상태를 구할 수 있다

• store에 있는 subscribe 메소드를 콜백을 등록해 사용하면 상태가 변경될때마다 작동시킬 수 있다

• store에 dispatch 메소드를 통해 만들어둔 액션을 디스패치 해줄 수 있다.

Redux 사용

Provider

• react-redux에 Provider를 통해 기존 JSX를 감싸주고 store를 프랍으로 넣어주면 됨.

connect

• connect를 통해 redux store의 정보를 현재 컴포넌트 props로 전달해줌
• connect의 첫번째 인자로 들어가는 mapStateToProps를 통해 스토어가 가지고 있는 state를 어떤 이름의 프랍으로 전달해줄지 리턴해주고 여기에서 'toDos'와 상단 Home 컴포넌트의 toDos 프랍은 같은 프랍
• connect의 두번째 인자로 들어가는 mapDispatchToProps를 통해 액션을 인자로 담은 dispatch를 이름을 정해 프랍으로 전달해줌
  여기서는 addToDo라는 이름으로 디스패치를 전달해줌
• connect()가 리턴하는 함수의 인자로 현재 Home 컴포넌트를 넣어줌으로 mapStateToProps, mapDispatchToProps로 만든 프랍스를 전달 받게됨