Javascript 在一个页面上多次呈现React/Redux应用程序？

我一直在开发React/Redux应用程序来构建报价。对我的州进行粗略的简化如下：

{
  account: { name: 'john doe' },
  lineItems:[
    { product: {id: 123, ...}, price: 10, units: 5 },
    { product: {id: 124, ...}, price: 10, units: 5 },
  ],
  modifiers: { couponCode: 'asdf', vip: true }  
}

const appReducer = combineReducers<GlobalState>({
  account: accountReducer,
  lineItems: lineItemReducer,
  modifiers: modifersReducer,
});

{
  quotes: {
    "0": {
      account: { name: 'john doe' },
      lineItems:[
        { product: {id: 123, ...}, price: 10, units: 5 },
        { product: {id: 124, ...}, price: 10, units: 5 },
      ],
      modifiers: { couponCode: 'asdf', vip: true }  
    },
    "1": {
      account: { name: 'billy jean' },
      lineItems:[
        { product: {id: 123, ...}, price: 10, units: 5 },
      ],
      modifiers: { couponCode: '', vip: false }  
    },
  }
}

{
  type: 'UPDATE_PRICE'
  payload: { productId: 123, newPrice: 15 }
}

我的减速机会被切成这样：

{
  account: { name: 'john doe' },
  lineItems:[
    { product: {id: 123, ...}, price: 10, units: 5 },
    { product: {id: 124, ...}, price: 10, units: 5 },
  ],
  modifiers: { couponCode: 'asdf', vip: true }  
}

const appReducer = combineReducers<GlobalState>({
  account: accountReducer,
  lineItems: lineItemReducer,
  modifiers: modifersReducer,
});

{
  quotes: {
    "0": {
      account: { name: 'john doe' },
      lineItems:[
        { product: {id: 123, ...}, price: 10, units: 5 },
        { product: {id: 124, ...}, price: 10, units: 5 },
      ],
      modifiers: { couponCode: 'asdf', vip: true }  
    },
    "1": {
      account: { name: 'billy jean' },
      lineItems:[
        { product: {id: 123, ...}, price: 10, units: 5 },
      ],
      modifiers: { couponCode: '', vip: false }  
    },
  }
}

{
  type: 'UPDATE_PRICE'
  payload: { productId: 123, newPrice: 15 }
}

但很明显，这种新的状态形状与我切割减速机的方式并不匹配。而且，似乎我必须重构我的所有操作，以便知道它们应该在哪个引用上操作？例如，如果我有这样一个动作：

{
  account: { name: 'john doe' },
  lineItems:[
    { product: {id: 123, ...}, price: 10, units: 5 },
    { product: {id: 124, ...}, price: 10, units: 5 },
  ],
  modifiers: { couponCode: 'asdf', vip: true }  
}

const appReducer = combineReducers<GlobalState>({
  account: accountReducer,
  lineItems: lineItemReducer,
  modifiers: modifersReducer,
});

{
  quotes: {
    "0": {
      account: { name: 'john doe' },
      lineItems:[
        { product: {id: 123, ...}, price: 10, units: 5 },
        { product: {id: 124, ...}, price: 10, units: 5 },
      ],
      modifiers: { couponCode: 'asdf', vip: true }  
    },
    "1": {
      account: { name: 'billy jean' },
      lineItems:[
        { product: {id: 123, ...}, price: 10, units: 5 },
      ],
      modifiers: { couponCode: '', vip: false }  
    },
  }
}

{
  type: 'UPDATE_PRICE'
  payload: { productId: 123, newPrice: 15 }
}

似乎两个引号中的产品

123

都将更新

---

也许有什么方法可以让我在页面上呈现整个应用程序，而不必重构我的整个状态？我不确定我最好的方法是什么，不要求我重写应用程序的大部分内容。

这应该给你一个想法。它基本上是在另一个减速器中使用一个减速器。就像在另一个函数体中使用函数一样简单。你也可以在上面运行它

---

我只是想在这里补充我的具体答案

基本上，我按照norbertpy的建议添加了一个新的根还原剂。但是，我还必须在每个操作中添加一个参数

quoteId

，以指定该操作来自哪个引用，并且应该在哪个引用上操作。这是重构过程中最耗时的部分，因为现在分派操作的每个组件都必须有权访问quote键

减速器

const quoteReducer = combineReducers({
  account: accountReducer,
  lineItems: lineItemReducer,
  modifiers: modifersReducer,
});

const rootReducer = (state = {quotes: []}, action) => {
  const newQuoteState = quoteReducer(state.quotes[action.quoteId], action);
  const newQuotes = {...state.quotes};
  newQuotes[action.quoteId] = newQuoteState;
  return {...state, ...{quotes: newQuotes}};
};

行动

{
  type: 'UPDATE_PRICE'
  quoteId: '0',
  payload: { productId: 123, newPrice: 15 }
}

---

为什么不编写另一个使用

appReducer

来处理整个新状态的reducer呢？@norbertpy不确定我是否明白，你能提供一个简单的例子，说明它可能是什么样子并给出答案，我会接受它的。这很有帮助。我想指出的一件大事是，我必须为我的所有操作添加一个参数，以便它们知道操作的引用状态