reactjs - 如何在 React/Redux 应用程序中指定状态的形状?

标签 reactjs redux state-management

自从我开始阅读 SPA 以来,最让我困惑的是如何处理应用程序状态。

虽然我在 Redux 中找到了我正在寻找的大部分答案,但仍有一些事情我不确定如何处理。

其中之一是如何指定我想在我的应用程序中使用的“实体”的形状。在我过去使用过的其他框架中,我看到大量使用 ES2015 类来实现此目的,但在 React/Redux 应用程序中,对象文字是迄今为止表达应用程序状态的首选方式。 昨晚我读到了normalizing data in the redux docs ,虽然它给了我关于如何处理深度嵌套对象的很好的想法,但它给我留下了一种感觉,那就是缺少了一些东西,那就是如何在一个点上尽可能清楚地指定对象的结构/形状应用程序的状态是。

取上述文章中使用的示例数据:

{
    posts : {
        byId : {
            "post1" : {
                id : "post1",
                author : "user1",
                body : "......",
                comments : ["comment1", "comment2"]    
            },
            "post2" : {
                id : "post2",
                author : "user2",
                body : "......",
                comments : ["comment3", "comment4", "comment5"]    
            }
        }
        allIds : ["post1", "post2"]
    },
    comments : {
        byId : {
            "comment1" : {
                id : "comment1",
                author : "user2",
                comment : ".....",
            },
            "comment2" : {
                id : "comment2",
                author : "user3",
                comment : ".....",
            },
            "comment3" : {
                id : "comment3",
                author : "user3",
                comment : ".....",
            },
            "comment4" : {
                id : "comment4",
                author : "user1",
                comment : ".....",
            },
            "comment5" : {
                id : "comment5",
                author : "user3",
                comment : ".....",
            },
        },
        allIds : ["comment1", "comment2", "comment3", "commment4", "comment5"]
    },
    users : {
        byId : {
            "user1" : {
                username : "user1",
                name : "User 1",
            }
            "user2" : {
                username : "user2",
                name : "User 2",
            }
            "user3" : {
                username : "user3",
                name : "User 3",
            }
        },
        allIds : ["user1", "user2", "user3"]
    }
}

你会如何表达这些数据的形状?就这样吗?

{
    posts : {

    },
    comments : {

    },
    users : {

    }
}

或者也许:

{
    posts : {
        byId : {

        }
        allIds : []
    },
    comments : {
        byId : {

        }
        allIds : []
    },
    users : {
       byId : {

        }
        allIds : []
    }
}

好吧,这并没有告诉我每个 byId 对象内部对象的实际形状,而这正是自从我开始研究一点 Redux 以来一直困扰我的问题。

所以问题是,是否有任何方法/常见做法可以让我以最清晰的方式表达形状,特别是构成存储将要管理的状态的对象的每个属性?

最佳答案

作为作者"Structuring Reducers"文档部分,这是因为数据项的实际内容完全取决于您和您的应用程序。这实际上更像是一个通用的 Javascript“我如何表达类型?”问题。有静态类型系统,例如 TypeScript 和 Flow;基于文档的方法,如 JSDoc;运行时方法,例如 React PropTypes 库或 tcomb;以及基于模式的方法,例如 JSON-Schema。这些方法中的任何一种都是在应用程序中记录和强制执行数据类型定义的有效方法。

标准化只是一种组织这些值的方法,无论您选择如何定义其内容。

关于reactjs - 如何在 React/Redux 应用程序中指定状态的形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44793171/

相关文章:

reactjs - 使用 React 和 TypeScript 时如何正确输入 @connect?

react-native - 如何将reactotron-redux与easy-peasy一起使用?

reactjs - redux-persist 和 AsyncStorage 有什么区别?

flutter - Flutter Provider,在此处放置函数调用以从Firestore数据库加载数据

javascript - 如何将 ReactJS es6 代码导入 Express 应用程序?

javascript - React 中 Blinker 速度不一致

javascript - 如何增加内联样式的填充值

javascript - 如果 componentWillUnmount 生命周期方法保持空白怎么办?或保留或写入?

flutter - 我应该在何时何地将值存储在BLoC本身或其状态中

flutter - 如何在 Flutter 中的选项卡(TabBar)之间保持状态?