Question

首先，我明白这是一个变异的状态变化;我知道我的耻辱。有时，正确的方式似乎并不是最聪明的，或者至少我不知道更好。

让我解释一下，我不想将密钥注入我的状态而不为预定义项创建和交换旧状态和新状态。我只是想注入一段时间的钥匙，如果我不这样做，那么他们都会被清除。我的初始状态看起来像

{graphSite: {site: "default", graphBrowser: { graphID: '', graphKey:'' }, browsable:[] }};

我的reducer看起来像这样**使用babel es7对象扩展运算符

case BROWSER: { state.graphSite.browsable[action.id] = action.payload
                return {...state}
               }

所以这会起作用，但是redux dev工具虽然可以访问可浏览数组，但是并没有显示状态变化，这可能是因为如果我将更改扩展到：

case BROWSER:  { state.graphSite.browsable[action.id] = action.payload
                        return {...state, 
                                graphSite: {...state.graphSite, 
                                    graphBrowser: {...state.graphSite.graphBrowser},
                                    browsable: {...state.graphSite.browsable}   }
                                }
                            }

现在可浏览显示在工具中，但理想情况下我这些是相同的。

所以问题是为不处于初始存储状态的动态密钥操纵状态的最佳方法是什么。这种做法只是感觉我做错了，因为我操纵了原始状态。

Answer 1

标题首先使我感到困惑。 dynamic key injection听起来对我来说太过花哨了：P。

无论如何，您实际上想要为browserble添加一对新对。你有：

case BROWSER: { state.graphSite.browsable[action.id] = action.payload
            return {...state}
           }

这是错误的（假设state来自reducer参数），因为您正在直接修改state对象。

redux的一个原则是Changes are made with pure functions。（redux docs）。

FTFY：

case BROWSER: { 
  const nextState = JSON.parse(JSON.stringify(state)); // deep copy your state
  nextState.graphSite.browsable[action.id] = action.payload
  return nextState
}

这不是最有效的代码，JSON操作很昂贵。它只是为了演示不直接改变状态对象的原理。

Answer 2

好吧，我无法在对象的上下文中看到如何附加变量键并且没有创建初始存储状态。复制状态然后返回附加后，这非常简单;这两个工作只是现在没有修改原始状态。

case BROWSER:  { let browser = {...state} 
                         browser.graphSite.browsable[action.id] = action.payload
                        return {...state, 
                                graphSite: {...state.graphSite, 
                                    graphBrowser: {...state.graphSite.graphBrowser},
                                    browsable: {...browser.graphSite.browsable}
                                    }
                                }
                            }

没有你的权利感谢这里的投票结构很糟糕

case BROWSER:  { let {graphSite: {browsable: browser}} = state
                         browser[action.id] = action.payload

                        return {...state, 
                                graphSite: {...state.graphSite, 
                                    graphBrowser: {...state.graphSite.graphBrowser},
                                    browsable: {...browser}
                                    }
                                }
                            }

我也意识到我可以使用像deepFreeze或immutable这样的东西来检查这些但是练习。

Redux减速机动态按键喷射

2 个答案: