Isolating Subapps

redux 的 git 仓库里有篇这样的讨论：Isolating Subapps

文中提到了这样的一个场景：

import React, { Component } from 'react'

class Portal extends Component {
  render() {
    return (
      <div>
        <A/>
        <B/>
        <C/>
      </div>
    )
  }
}

这是一个企业级应用，入口是 portal 项目，portal 这个项目下面还有3个子项目 A, B, C

下面分别有2种需求，如果是你你会怎么做，你用 redux 会怎么做？

场景一：

a，b，c 和 portal 之间互不干扰，没有共享状态，没有共享 action 。但是一些信息，比如登录信息这种共享信息存在 portal，也就是说 a，b，c 依赖 portal 的状态。请思考如果是你用 redux 怎么实现？

据我所知 redux 是没办法的。因为涉及到共享，状态必须在同一个事件系统中进行交换，也就是说 action 也必须在同一个事件系统中进行传播。而 redux 的 event system 等于 store。是单 store的。没有办法把子项目的 reducer 挂在一个父项目的 store 下。所以这个场景下在完全不通知 portal 我有什么 action 和 reducer 的情况下，只能通过 props 传递了。

但是 ractor 强调所谓的"单"指的是 event system，store 可以独立。所以a，b，c直接使用portal 的 system，把私有的 store 挂载到 portal 的 system。所以结果显而易见。下面是伪代码。

portal

export const system = new System("portal")

A

import { system as portalSystem } from "../system"

const App = () => <Provider system={system} stores={[AStore]}></Provider>

场景二：

a，b，c 和 portal 之间互不干扰，没有共享状态，没有共享 action 。也没有场景一的依赖portal，是完全独立的项目。

这个场景 redux 和 ractor 都能很好的处理

redux

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>
    )
  }
}

ractor

import React, { Component } from 'react'
import { System } from 'ractor-react'
import TodoStore from './todo.store'
import App from './App'

class SubApp extends Component {
  constructor(props) {
    super(props)
    this.system= new System()
  }

  render() {
    return (
      <Provider system={this.system} stores={[]}>
        <App />
      </Provider>
    )
  }
}

通过上面2个场景我们可以看出来，single 正如我说的那样，指的是 single event system。ractor 就是遵从这个思想设计的。