Хранилище Redux должно быть одно для каждого модуля или одно для всего приложения, состоящего из нескольких модулей

Question

Я интегрирую или переписываю свое приложение Angular 1 с Redux. Он имеет следующую архитектуру:

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 следует использовать магазин app1 когда используется внутри app1 и должен использовать магазин app2 когда используется внутри app2, Но модуль должен быть самостоятельной сущностью, и он не должен полагаться на какие-либо другие вещи для своего хранилища.
3. Или SM1 может иметь свой собственный магазин, не делящийся ни с каким приложением. Но когда SM1 используется внутри app1 будет ли его магазин конфликтовать с магазином app1,
4. Кроме того, если я использую хранилище на уровне модуля, то и модуль, и приложение должны быть снабжены ngRedux зависимости, которые кажутся излишними.

Каково лучшее решение здесь с точки зрения масштабируемой архитектуры и redux Основные принципы?

Answer 1

Я бы пошел на слабую связь столько, сколько вы можете:

• app1 - собственный магазин (объединяет sm store)
• app2 - собственный магазин (объединяет sm store)
• sm - собственный магазин

Answer 2

subsp-подпространство было создано для очень похожего варианта использования (на самом деле, мы также перенесли 2 отдельных приложения из angular 1 в систему реагирования / приведения с общими компонентами между ними). Это позволяет вам иметь единственное хранилище и изолировать его раздел для ваших общих компонентов.

Основная концепция заключается в том, что родительское приложение объединяет редуктор компонента в своем хранилище, а затем создаются вспомогательные хранилища, которые возвращают сокращенное дерево состояний и отправленные действия в пространстве имен.

Примечание: я не использовал 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 }

Обратите внимание, что 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 }

На этом этапе вам нужно будет разобраться, как внедрить эти вложенные хранилища в ваши общие компоненты.

Надеюсь, это полезно для вас.

Отказ от ответственности: я являюсь автором избыточного подпространства