Redux store 应该是每个模块一个，或者是一个包含多个模块的整个应用程序

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

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

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

应用级商店和模块级商店是指，例如：

假设我们有一个共享模块 SM1，它在两个应用程序之间共享。
SM1 在 app1 内使用时应使用 app1 的存储，在 app2 内使用时应使用 app2 的存储。但是一个模块应该是一个自我维持的实体，它的存储不应该依赖任何其他东西。
或者 SM1 可以拥有自己的商店，不与任何应用共享。但是当SM1在app1里面使用的时候，它的store会不会和app1.
此外，如果我使用模块级存储，那么模块和应用程序都需要提供 ngRedux 依赖项，这似乎有点多余。

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

Answer 1

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

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

注意：我没有使用过 angular 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 }

请注意，分配到 component2Store 中的 INCREMENT 操作并未更改 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 store 应该是每个模块一个，或者是一个包含多个模块的整个应用程序

Redux store should be one for each module or one for whole application comprising of a multiple mudules

components

angularjs

redux

angular-redux