账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    JavaScript 状态容器(vuex、redux)进行状态管理时,store设计问题
    49
    0

    近来一直在研究前端框架,之前是vue,现在开始看react,但一直对于store设计,感觉弄不清楚,
    假设需要做一个带搜索、分页的列表,我想到的几种形式是
    1 store中只存一页的数据,每次进入此页,重新请求数据。但这样的做法感觉用状态管理没有什么意义?
    2 我目前采用的设计,以log为例,格式为

      // 日志详情信息,结构{日志id:日志详情对象}
      log: {
        1: {…},
        2: {…},  
        …
        },
      // 日志搜索结果,结构{搜索条件:日志id数组}
      searchLog: {
        'user_id/1/type/add/px/1/pz/10': [1,2,3,…],
        …
        }

    页面根据条件从searchLog中获取id数组,再.map返回对应日志列表数据,
    这样,请求过的数据可以重复使用,问题是在数据变动时,没什么好办法,感觉也只能清空重新获取了。
    感觉都不是很好用,想请教看看大家是怎么做的?

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 在JavaScript的状态容器(如vuex、redux)中,状态管理是一个非常重要的概念,它的设计问题主要涉及以下几个方面:

      1. 组件化与组件复用:状态容器的设计目标之一是实现组件化和组件复用,每个组件都应该具有自己的状态,以便在组件之间共享和传递数据。然而,这种设计在组件化应用中可能会导致数据冗余,每个组件都要维护状态,这将大大增加代码的复杂性和维护难度。为了解决这个问题,可以使用状态管理工具,如Vuex或Redux,将状态数据封装在一个独立的组件中,每个组件只负责存储和管理自己的状态,而不会共享或传递状态数据给其他组件。

      2. 单例模式:在单例模式中,每个组件都只有一个实例,可以使用状态管理工具创建一个全局状态对象,每个组件都可以通过状态对象获取和修改状态数据。这种方式可以保证数据的一致性,避免状态共享带来的问题。然而,单例模式也有其缺点,如增加内存消耗、代码重复、维护复杂性高等。

      3. 数据流动性:在Redux中,状态数据是存储在store对象中的,状态的更新将直接影响到store对象,从而影响到所有订阅者。然而,这种方式也限制了状态的流动性,如果一个状态数据发生更改,其他订阅者可能需要等待一段时间才能看到这个更改。为了解决这个问题,可以使用状态管理工具,如Vuex,提供状态的惰性加载功能,即当状态数据发生变化时,状态对象不会立即更新,而是先通知所有的订阅者,让他们等待一段时间后再进行状态更新,这样可以避免状态数据的瞬时更新导致的状态数据流动性问题。

      4. 缓存:在Redux中,状态数据可以通过缓存机制存储在store对象中,从而避免频繁的数据库查询,提高性能。然而,缓存的策略和大小需要根据具体的应用场景和性能要求来选择和优化,以确保缓存的持久性和稳定性。例如,如果数据的更新频率很高,可以考虑将大部分状态数据存放在缓存中,而只在状态数据发生变化时才从缓存中获取,以减少数据库的访问。

      5. 测试与调试:状态管理工具提供了各种测试和调试工具,如状态树、状态追踪等,可以帮助开发者在开发过程中进行状态状态和数据状态的调试和测试。然而,使用状态管理工具进行状态管理并不意味着不需要进行手动的测试和调试,而是可以通过工具提供的状态追踪功能,自动收集和记录状态状态的变化和状态数据的变化,帮助开发者更方便地进行状态状态和数据状态的调试和测试。

      6. 应用场景:状态管理工具适用于各种场景,如Web应用程序、移动应用、后端服务等,可以根据应用场景选择和配置状态管理工具,以满足不同的需求和挑战。例如,在Web应用程序中,可以使用Redux实现状态管理,而在移动应用中,可以使用Vuex实现状态管理,而在后端服务中,可以使用MongoDB作为状态数据库。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部