Redux 심화

리액트와 리덕스를 연결

기본 개념은 상태를 바꾸면 화면이 다시 렌더링 되는 리액트와 같다. —> 다만, 상태가 리액트세계 외부의 리덕스 스토어에 저장된다는 점이 다르다.

리덕스에서 상태와 상태를 바꾸는 함수를 받아서 리액트에서 상호작용과 화면갱신을 수행한다.

리액트와 리덕스를 연결하기 위해서는 react-redux 라는 라이브러리를 설치해야 한다.

GitBook - 리액트와 함께 사용하기

CodeSandBox - 리액트와 리덕스 연결 예제

redux 개발자 도구 사용을 위한 확장 프로그램

리덕스 사용할 때 주의사항

1. 상태 변화를 다루기 위해 일일이 사람이 직접 코딩해줘야 한다. (관례로 해결하는 부분이 많다.) —> 이 부분을 자동으로 해주는 라이브러리가 MobX
2. MobX는 리덕스를 자동화 해놓은 버전이라고 볼 수 있다.
3. 리덕스나 MobX도 공통적으로 갖는 단점이 있다. —> 애플리케이션의 모든 상태가 하나의 스토어 안에 하나의 객체 트리 구조로 저장된다. (즉, 상태가 전역상태로 작동한다.) —> 전역상태이기 때문에 관리하기가 어렵다.
4. 큰 상태트리가 생긴다. (엄청나게 큰 상태트리 === 객체) —> 상태 트리에 변화가 생기면(action이 dispatch 되면) connect로 연결된 모든 컴포넌트를 다시 그린다. 그래서 엄청난 부하가 생긴다. —> 다만, connect 함수에 PureComponent와 비슷한 최적화 과정이 적용되어 있기 때문에 connect와 관련이 있는 변화만 다시 그린다. —> 하지만 상태 트리에 변화가 생길 경우 모든 리듀서가 실행된다는 부담은 여전히 남아 있는 상태이다. (즉, 아주 자주 실행되는 이벤트에 dispatch 한다는 것은 엄청난 부담이 된다.) —> 따라서 되도록이면 action이 자주 dispatch 되지 않도록 코딩해야 한다. (scroll이나 mouse좌표 같은 상태들은 Redux가 아닌 React 상태에 저장하는 것이 좋다.)
5. PureComponent를 쓸 때 불변성을 항상 지켜야 하는 것 처럼, connect를 쓸 때에는 반드시 불변성을 항상 지켜야 한다. (connect의 최적화 과정 때문에 불변성이 지켜지지 않으면 아예 화면 렌더링이 안된다.)

Redux 에서의 비동기 액션

서버와 통신할 때에는 mapDispatchToProps() 함수에서 넘겨주는 상태를 바꾸는 함수에 async를 붙여서 비동기로 작성하는 것이 가장 쉽다. (비동기 작업 하기 전에 action dispatch 해주고, 비동기 작업 끝나고 다시 action dispatch 해주면 된다.) —> 다만, 실무에서 사용되는 방법은 아니다.

Redux에서의 비동기 액션 - Redux Thunk Middleware를 사용하는 이 방법이 업계 표준으로 사용된다.

보통 redux-thunk 라이브러리를 이용해서 비동기 작업을 하고, 이외에도 비슷한 라이브러리로 제너레이터를 사용하는 redux-saga가 있다.