Redux 서브 앱 격리하기

<BigApp> 컴포넌트에 포함된 "대형" 앱 내부에 <SubApp> 컴포넌트로 포함된 더 작은 "서브 앱"이 있는 경우를 생각해 보세요:

import React, { Component } from 'react'
import SubApp from './subapp'

class BigApp extends Component {
  render() {
    return (
      <div>
        <SubApp />
        <SubApp />
        <SubApp />
      </div>
    )
  }
}

이 <SubApp>들은 완전히 독립적입니다. 데이터나 액션을 공유하지 않으며 서로를 인식하거나 통신하지 않습니다.

이 접근 방식과 표준 Redux 리듀서 컴포지션을 혼합하지 않는 것이 좋습니다. 일반적인 웹 앱에서는 리듀서 컴포지션을 사용하세요. "제품 허브", "대시보드" 또는 서로 다른 도구를 하나로 통합하는 엔터프라이즈 소프트웨어의 경우 서브 앱 방식을 시도해 보세요.

서브 앱 방식은 제품이나 기능별로 분리된 대규모 팀에서도 유용합니다. 이러한 팀은 서브 앱을 독립적으로 또는 "앱 셸"로 감싸 함께 배포할 수 있습니다.

아래는 서브 앱의 루트 연결 컴포넌트입니다. 일반적으로 하위에 연결되었거나 아닌 컴포넌트를 더 렌더링할 수 있습니다. 보통은 <Provider> 안에서 렌더링하면 됩니다.

class App extends Component { ... }
export default connect(mapStateToProps)(App)

하지만 서브 앱 컴포넌트가 Redux 앱이라는 사실을 숨기고 싶다면 ReactDOM.render(<Provider><App /></Provider>)를 호출할 필요가 없습니다.

동일한 "더 큰" 앱 안에서 여러 인스턴스를 실행하면서도 Redux를 구현 세부사항으로 완전한 블랙박스로 유지하고 싶을 수 있습니다.

Redux를 React API 뒤로 숨기려면 생성자에서 스토어를 초기화하는 특수 컴포넌트로 감싸면 됩니다:

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './reducers'
import App from './App'

class SubApp extends Component {
  constructor(props) {
    super(props)
    this.store = createStore(reducer)
  }

  render() {
    return (
      <Provider store={this.store}>
        <App />
      </Provider>
    )
  }
}

이렇게 하면 모든 인스턴스가 독립적으로 동작합니다.

이 패턴은 데이터를 공유하는 동일 앱의 일부에는 권장되지 않습니다. 하지만 더 큰 앱이 작은 앱의 내부에 전혀 접근할 수 없고 Redux로 구현되었다는 사실을 구현 세부사항으로 유지하고 싶을 때 유용합니다. 각 컴포넌트 인스턴스는 자체 스토어를 가지므로 서로를 "알지" 못합니다.