Redux Reducer：将密钥注入状态

Question

首先，我明白这是一种变异的状态变化；我知道我很丢脸。有时正确的方法似乎不是最聪明的，或者我至少不知道更好。

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

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

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

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

所以这会起作用，但是 redux 开发工具没有显示状态变化，尽管可浏览的数组是可访问的，这可能是因为我违背了规律，但如果我将更改扩展到：

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 文档）。

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 之类的东西来检查这些但要练习。