3

我正在使用 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

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

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

我所说的应用级商店和模块级商店是指，例如：

  1. 假设我们有一个共享模块SM1，它在两个应用程序之间共享。
  2. SM1应该使用app1when used inside的 store ，应该使用when used insideapp1的 store 。但是一个模块应该是一个自我维持的实体，它不应该依赖任何其他东西来存储它。app2app2
  3. 或者SM1可以有自己的商店，不与任何应用程序共享。但是当在SM1里面使用时，app1它的 store 会和 的 store 冲突app1。
  4. 此外，如果我使用模块级存储，那么模块和应用程序都需要提供ngRedux看起来有点多余的依赖项。

redux就可扩展架构和核心原则而言，这里的最佳解决方案是什么？

4

2 回答 2

1

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

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

注意：我没有使用带 redux 的 angular 并且我不知道如何将两者集成，所以我只会展示如何创建子商店并希望它对你有用（如果你确实让它工作，我很想知道，这样我们就可以在我们的文档中扩展我们支持的框架）。

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的作者

于 2017-09-21T12:47:22.490 回答
1

我会尽可能地采用松散耦合：

  • app1 - 自有商店（集成 sm 商店）
  • app2 - 自有商店（集成 sm 商店）
  • sm - 自己的商店
于 2017-09-21T13:08:15.937 回答