redux

꼭 리액트에서만 사용 되는 것은 아니지만, 리액트에서 잘 쓰이는 state관리 도구입니다. 거대한 state를 관리하는 데 좋고, 컴포넌트 간의 데이터를 공유하는데 유용하며 state관리가 예측 가능합니다.

state관리가 예측 가능하다는 말은, 리덕스가 1)단일소스 2)읽기 전용인 state 3)순수 함수로만 state 변경이 가능하다는 뜻입니다. 기존 mvc패턴 같은 경우에는 다양한 컨트롤러가 존재하고 model이 view를 바꾸기도 하고 view가 model을 바꾸기도 하는 등 나중에는 예측이 불가능한 경우가 생겼습니다.

redux flow

리덕스의 흐름은 아래 순서로 이루어집니다.

action -> dispatcher

유저의 어떤 행동 및 트리거가 발생되는 것입니다.

middleware

리듀서가 순수함수의 형태를 유지하고 state의 상태를 변경하는 것에만 집중하고, 그 외의 것들을 사전에 처리하는 곳입니다.

root Reducer

state의 상태를 업데이트합니다.

store

state 저장소입니다.

view(dom change)

바뀐 데이터를 반영한 화면으로 바뀝니다.

redux 설치

1) povider
모든 컴포넌트가 접근할 수 있게, app.js에서 모든 것을 감싸는 컴포넌트로 만듦.

2) root-reducer 만들기
3) 각 reduceraksemfrl
4) store만들기

컴포넌트와 리덕스의 연결

props로 리덕스의 state와 트리거 역할을 해 줄 dispatch를 넘길 수 있도록 연결합니다.

class 의 경우

mapStateToProps의 state는 rootReducer입니다. state를 props로 넘길 수 있게 연결합니다.

import { connect } from 'react-redux';

const mapStateToProps = state => ({
  currentUser: state.user.currentUser
});

export default connect(mapStateToProps)(Header);

mapDispatchToProps는 dispatch를 props로 넘길 수 있게 연결합니다.

const mapDispatchToProps = dispatch => ({
  setCurrentUser: user => dispatch(setCurrentUser(user))
});

export default connect(null, mapDispatchToProps)(App);