React Redux

React

• Facebook이 만들고 사용 중
• View의 변화가 잦은 페이지에 적합
• 컴포넌트(UI) 기반
  • 컴포넌트 재사용 용이
  • user-interaction에 집중
• Virtual DOM(이전 Virtual DOM과 비교하면 바뀐 부분한 실제 DOM에 반영하는 방식)
• 단방향 DATA FLOW

Redux

Flux 패턴을 좀 더 쉽고 정돈된 형태로 사용할 수 있게 도와주는 라이브러리

• Action
• Reducer
• Store

Redux 연결

1. React Component의 최상위에 store 추가
   

   import { createStore } from ‘redux’;
   
   store = createStore(reducer);
   

2. <Provider>로 루트 컴포넌트 감싸기
   

   import { createStore, applyMiddleware } from 'redux';
   
   ReactDOM.render(
   <Provider store={store}>
       <Routes />
   </Provider>,
   document.getElementById('root')
   );
   

3. Component와 Store 연결 - connect()이용
   

   import { connect } from ‘react-redux’;
   
   // component의 props에 매핑할 상태를 정의
   // 기존 React Component 내부의 constructor()
   const mapStateToProps = (state) => ({
   myState: state.myState,
   …
   });
   
   // dispatcher를 component의 props에 매핑
   const mapDispatchToProps = (dispatch) => ({
   yourReducerFunction(index) {
   dispatch(yourReducerFunction(index));
   },
   …
   });
   
   // 연결!!
   export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);
   

Middleware란?

• Action을 보내는 순간부터 Store에 도착하는 순간까지 사이에 thirdParty 확장을 사용할 수 있는 지점을 제공
• 객체 대신 함수를 생성하는 액션 생성함수를 작성할수 있도록 도와줌
• Action과 Reducer 사이의 중간자
• 리듀서가 액션을 처리하기전에, 미들웨어가 할 수있는 작업들은 여러가지가 있는데… 단순히 전달받은 액션을 콘솔에 기록을 할 수도 있고, 전달받은 액션에 기반하여 액션을 아예 취소시켜버리거나, 다른 종류의 액션들을 추가적으로 디스패치 할 수도 있음
• Store를 생성할 때 설정을 함

Redux applyMiddleware()란?

• redux 모듈 안에 들어있는 Middleware

redux-thunk

• 비동기 작업을 처리하기 위한 미들웨어
• 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해줌

Middleware 적용

// index.js
const store = createStore(modules, applyMiddleware(reduxThunk, ReduxThunk))

함수들을 비동기적으로 수정

export const test = () => dispatch => {
    // 1초 뒤 액션 디스패치
    setTimeout(
        () => { dispatch(decrement()) },
        1000
    );
}

export default connect(
    (state) => ({
        myState: state.myState
    }),
    (dispatch) => ({
        myAction: bindActionCreators(counterActions, dispatch)
    })
)(YourComponent);