javascript - 可变 reducer 的 Redux 初始状态

标签 javascript reactjs redux reducers

在我的程序中,我有多个网格,但它们非常相似,因此我决定为所有网格制作一个 reducer ,以保持我的代码美观且干燥。当我分派(dispatch)事件以更改存储时,我将网格名称作为参数与有效负载一起发送,并且所有内容都写入该网格名称下的存储。

例如:如果我发送事件来更改目录网格的网格标题,那么商店将如下所示:(让我们假设用户已经在商店中)

grid: {
    catalog: {
        headers: {
            some data
        }
    },
    users: {
        headers: {
            some other data
        }
    }
}

我的问题是如何编写模块化初始状态?目前,除了网格名称之外,我没有初始状态,因为没有它们我的代码将无法工作。当我需要将某些内容设置为初始状态时,我必须将其包含在我的函数 initializeGrid 中,该函数会调度一些事件来设置类似于初始状态的内容。

但是如果没有初始状态,我的 reducer 非常困惑,因为几乎在每种情况下我都必须检查是否有某种状态或者这是否是第一个条目。

只要知道我并不懒惰,但我的初始状态将是 300 行长,而且不会是 DRY :/

正确的解决方案是什么?

最佳答案

为什么需要 {} 以外的初始状态?

reducer 只能用所需的值更新状态。 如果键存在,则更新其值,如果不存在,则添加该值。 看一下下面的例子:

let x = { "a" : { "b": 11 }}
let y = { ...x, "c" : { "d": 22 }}
let z = { ...y, "a": { "b": 33 }}

值如下(省略“”以便于阅读):

x: { a: { b: 11 }
y: { a: { b: 11 }, c: { d: 22 }}
z: { a: { b: 33 }, c: { d: 22 }}

关于javascript - 可变 reducer 的 Redux 初始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48873328/

相关文章:

javascript - 如何动态更改 Twilio Flex Webchat 中的友好名称

javascript - 从 Redux 状态删除一个项目

javascript - Angular 2 : reference error can't find variable require

javascript - “string”不能用于索引类型 '{}'

javascript - 使用 React.js 显示列表

node.js - 使用 fetch 方法从 Express 端点获取数据显示错误 React Redux

reactjs - redux-form——通过代码设置字段值?

javascript - 将一些文本放置在 div 后面

javascript - 禁用 CKEditor 中的命令

javascript - 如何更改 Facebook 分享按钮的样式?