Question

我正在使用Redux集成或重写我的Angular 1应用程序。它具有以下架构：

app1 => App1 running on diff subdomain app2 => App2 running on diff subdomain and so on... shared => Shared modules(with multiple components) b/w app1 and app2

应用程序由特定于它的多个模块组成。
共享目录包含一个或多个在两个或多个应用之间共享的模块

所以我的问题是我应该有app level store还是模块级商店。

通过应用程序级别商店和模块级别商店，我的意思是，例如：

我们假设我们有一个共享模块SM1，它在两个应用之间共享。
SM1在app1内使用时应使用app1的商店，并且在app2内使用时应使用app2的商店。但是模块应该是一个自我维持的实体，它不应该依赖任何其他东西来存储它。
或SM1可能有自己的商店不与任何应用共享。但是，如果在SM1内使用app1，则其商店会与app1的商店发生冲突。
此外，如果我使用模块级存储，那么模块和应用程序都需要提供ngRedux依赖项，这似乎是多余的。

在可扩展架构和redux核心原则方面，最佳解决方案是什么？

Answer 1

redux-subspace是为一个非常相似的用例而创建的（事实上，我们也一直在从角度1迁移2个单独的应用程序，以反应/ redux与它们之间的共享组件）。它允许您拥有一个商店并为共享组件隔离它的一部分。

基本概念是父应用程序将组件的reducer组合到它的存储中，然后创建子存储，返回简化状态树和命名空间调度操作。

注意：我没有使用角度w / redux，我不知道你如何整合这两个，所以我只是展示你如何创建子商店并希望它适合你（如果你确实让它工作，我很乐意知道，所以我们可以在我们的文档中扩展我们支持的框架。）

import { createStore, combineReducers } from 'redux'
import { subspace, namespaced } from 'redux-subspace'

const component1 = (state = { value: 1 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, value: state.value + 1 }
        default:
            return state
    }
}

const component2 = (state = { value: 10 }, action) => {
    switch (action.type) {
        case 'DECREMENT':
            return { ...state, value: state.value - 1 }
        default:
            return state
    }
}

const reducer = combineReducers({
    component1: namespaced('component1')(component1),
    component2: namespaced('component2')(component2)
})

const store = createStore(reducer)

const component1Store = subspace((state) => state.subApp1, 'subApp1')(store)
const component2Store = subspace((state) => state.subApp2, 'subApp2')(store)

console.log('store state:', store.getState()) // { "component1": { "value": 1 }, "component2": { "value": 10 } }
console.log('component1Store state:', component1Store.getState()) // { "value": 1 }
console.log('component2Store state:', component2Store.getState()) // { "value": 10 }

现在，对这些子商店进行操作也只会影响他们的状态

component1Store.dispatch({ type: 'INCREMENT'})

console.log('store state:', store.getState()) // { "component1": { "value": 2 }, "component2": { "value": 10 } }
console.log('component1Store state:', component1Store.getState()) // { "value": 2 }
console.log('component2Store state:', component2Store.getState()) // { "value": 10 }

component2Store.dispatch({ type: 'INCREMENT'})

console.log('store state:', store.getState()) // { "component1": { "value": 2 }, "component2": { "value": 10 } }
console.log('component1Store state:', component1Store.getState()) // { "value": 2 }
console.log('component2Store state:', component2Store.getState()) // { "value": 10 }

请注意，INCREMENT中的component2Store操作未改变component1Store的状态。如果我们发送DECREMENT行动

，情况就会逆转

component1Store.dispatch({ type: 'DECREMENT'})

console.log('store state:', store.getState()) // { "component1": { "value": 2 }, "component2": { "value": 10 } }
console.log('component1Store state:', component1Store.getState()) // { "value": 2 }
console.log('component2Store state:', component2Store.getState()) // { "value": 10 }

component2Store.dispatch({ type: 'DECREMENT'})

console.log('store state:', store.getState()) // { "component1": { "value": 2 }, "component2": { "value": 9 } }
console.log('component1Store state:', component1Store.getState()) // { "value": 2 }
console.log('component2Store state:', component2Store.getState()) // { "value": 9 }

此时，您需要了解如何将这些子商店注入共享组件。

希望这对你有用。

免责声明：我是redux-subspace的作者

Answer 2

我会尽可能多地选择松散耦合：

app1 - 自己的商店（集成了sm商店）
app2 - 自己的商店（集成了sm商店）
sm - 自己的商店

Redux商店应该是每个模块一个，或者整个应用程序包含多个mudules

2 个答案: