首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用window.store使redux存储全球化是个好主意吗?

使用window.store使redux存储全球化是一个好主意吗?

Redux是一个用于JavaScript应用程序的可预测状态容器。它通过单一的全局状态树来管理应用程序的状态,并使用纯函数来处理状态的变化。Redux的设计目标是使应用程序的状态管理更加可控和可预测。

然而,使用window.store将Redux存储全球化可能不是一个好主意。以下是一些原因:

  1. 全球化:全球化是指将应用程序适应不同的语言、文化和地区的需求。Redux本身并不提供全球化的功能。全球化通常涉及到多语言支持、本地化、时区处理等方面,而Redux主要关注应用程序的状态管理。因此,将Redux存储全球化可能会导致功能混淆和不必要的复杂性。
  2. 维护性:将Redux存储全球化可能会增加代码的复杂性和维护成本。Redux的设计初衷是将状态管理集中在一个地方,以便更好地跟踪和调试状态的变化。将Redux存储全球化可能会导致状态的散布和混乱,使代码难以理解和维护。
  3. 可测试性:Redux的一个重要优势是它的可测试性。通过将状态的变化和副作用隔离在纯函数中,我们可以更容易地编写和运行测试。将Redux存储全球化可能会破坏这种可测试性,使测试变得更加困难和复杂。

相反,如果您需要实现全球化功能,可以考虑以下方法:

  1. 国际化库:使用专门的国际化库,如react-intl或i18next,来处理应用程序的多语言支持和本地化需求。这些库提供了丰富的功能和工具,使全球化变得更加简单和可维护。
  2. 上下文:使用React的上下文(Context)功能,将全局状态传递给需要的组件。这样可以更好地控制状态的范围,并避免全局状态的混乱。
  3. 组件通信:使用React的组件通信机制,如props、事件或Redux的connect函数,将状态传递给需要的组件。这样可以更好地组织和管理状态,使代码更加清晰和可维护。

总结而言,使用window.store使Redux存储全球化可能会引入不必要的复杂性和维护成本。相反,应该考虑使用专门的全球化库和React的上下文或组件通信机制来实现全球化功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

redux基础概念及执行流程详解

一、执行流程 全局有一公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发布订阅)==》redux就是这种解决方案...:redux只有一作用,就是为了实现组件之间的信息交互。...1.执行createStore 创建一容器store来用来管理公用的状态信息 创建一事件池,用来存储一些方法(方法一般都是用来通知某个组件重新渲染的) 当容器中的状态改变,会自动通知事件池中的方法依次执行...subscribe */ let store = createStore(reducer); window.store = store; //把创建的容器挂载到全局下,保证每一子组件都可以获取到...store,从而执行一些其它的操作(当然也可以基于属性) //reducer管理员方法:reducer方法在dispatch派发的时候执行的 //state:现有store容器中的状态信息(如果

79610

redux工程化结构

一、简述 redux的工程化管理 1.reducer的模块化划分:每一板块有一自己对应的reducer,最后基于一些方法把所以的reducer合并即可; 2.基于actionCreator统一管理每次派发需要的行为对象...,而且和reducer一样,也是分板块管理的; 3.把dispatch和reducer校验时候需要的行为标识(type)进行统一管理 目录建设 store store中存放的redux使用的东西 action...: action文件夹存放的actionCreator内容 reducer reducer文件夹存放的每个板块自己对应的reducer actionTypes.js 存储项目中需要的所以行为标识 index.js.../store/index.js' store/index.js //(创建容器,传入合并好的reducer) import {createStore} from 'redux' import reducer.../reducer/index.js' let store = createStore(reducer); window.store = store; store/actionTypes.js //(定义所有的类型变量名

46630

9. redux如何精简代码

经过2天折腾,终于把API全面切换到GitHub,总结一下经验: redux精简代码 使用redux-persist持久化数据 redux如何减少样板代码##### ---- 通过之前的代码不难看出...本来打算使用第三方组件的,比如redux-actions(https://github.com/acdlite/redux-actions)等,但是实验了一下,功力不足反而没有成功,然后自己照抄官方说明写了一下...真正的 Flux 模版概念性的:发送更新的需求,用 Dispatcher 注册 Store 的需求,Store 对象的需求 (当你想要一哪都能跑的 App 的时候复杂度会提升)。...在组件内部调用的的方式没有任何改变,这也是redux的强大之处。 给效果图 ?...search react-native 持久化数据##### ---- 手机端肯定需要考虑离线的情况发生,有了redux,这件事情就简单了,只需要把store这个state树持久化就OK了,官方持久化接口使用

1.1K50

像数据库一样设计你的 redux 数据结构

使用索引可以从多个维度表现数据。 最近我在RC聊天系统浏览关于 JavaScript 的一些讨论时,注意到了Kate Ray的一问题: 应该怎样在 redux 存储中结构化我的数据?...的确,这是使用redux时最常见的问题之一。 有很多需要考虑的东西,你经常会像访问一行列表一样遍历数据? 你需要以O(1)的时间复杂度快速访问某些条目?...一些常见的方法 如果你需要存储一些每个项目都带有id的数据,可以使用Array, Object, 或者 对象数组来保存。 数组对象[{values}]: 这是最常见的一种范式。...在后端很容易做到这一点,因为你很可能从数据库中提取数据,而数据库中已经存在id字段,可以直接将其作为键使用。 索引的力量 请注意,我们上面介绍的结构只是一些行的索引,索引id。...把你存储的数据想象成为图书馆,可以用索引快速找到任何项目 Normalizr与Reselect 这里描述的模式正是Normalizr库所使用的模式。

1.3K20

【领域驱动设计】Redux 和领域驱动设计

领域事件使最终的一致性成为可能。领域事件的示例:添加了一新帖子,或者五点钟。 Aggregates:DDD的主要模式。它代表小块模型(理想情况下只有一实体和几个对象值)。...Redux 上的 DDD 模式 有两种模式使 DDD 流行起来:事件溯源和 CQRS。两者都源于提高可扩展性和性能的必要性,并且这两种技术通常都应用在 Redux 中。 第一事件溯源。...你熟悉 Redux 中的这个概念?几乎可以肯定,是的。在 Redux 中,这称为 Time Traveling,您可能在开发人员工具中调试时经常使用它。...你在帮助其他用户?只需重播他们的事件即可知道他们的状态。 第二CQRS。 CQRS 的 DDD 的目标创建组合来自多个聚合的数据的模型。...例如,我们可以创建一模型来统计帖子。它接收 PostAdded 事件并增加每个事件的计数。 Redux 中的等价物多个 reducer 在不同的地方使用相同的操作进行更新。

1.4K30

设计师都能懂的 Redux 指南

请不要用 Google 搜索 花哨的后端的东西 我听说过它,但我不知道它是什么,这可能 React 框架 一种在 React 应用中存储管理状态的更好方式 这个问题,我问过 40 多位设计师,以上他们的经典回答...如果我们的 UI 这样构造的,那么在填充UI之前,我们什么时候获取数据以及在哪里存储数据 假设每个组件中都有一厨师。从服务器获取数据就好比采购所需的所有原材料以准备佳肴。...使用Redux,我们只获取一次数据并将其存储在一中心位置,称为 store。然后,任何组件都可以随时使用这些数据。这就像附近有一家超市,我们的厨师可以在那里买到所有的食材。...但因为 react-redux 本身只是连接库,并且开发者通常一起使用 Redux 和 react-redux ,因此我认为将它当做 Redux 的好处之一并无不妥。...真正可扩展的系统 使用 Redux,你必须“dispatch”一 action 来更新应用程序中的任何数据。 这种限制使我们可以深入了解应用程序中发生的各个方面。

1.6K10

从设计的角度看 Redux

请不要用 Google 搜索 花哨的后端的东西 我听说过它,但我不知道它是什么,这可能 React 框架 一种在 React 应用中存储管理状态的更好方式 这个问题,我问过 40 多位设计师,以上他们的经典回答...图片描述 如果我们的 UI 这样构造的,那么在填充UI之前,我们什么时候获取数据以及在哪里存储数据 假设每个组件中都有一厨师。从服务器获取数据就好比采购所需的所有原材料以准备佳肴。...使用Redux,我们只获取一次数据并将其存储在一中心位置,称为 store。然后,任何组件都可以随时使用这些数据。这就像附近有一家超市,我们的厨师可以在那里买到所有的食材。...但因为 react-redux 本身只是连接库,并且开发者通常一起使用 Redux 和 react-redux ,因此我认为将它当做 Redux 的好处之一并无不妥。 ?...真正可扩展的系统 使用 Redux,你必须“dispatch”一 action 来更新应用程序中的任何数据。 这种限制使我们可以深入了解应用程序中发生的各个方面。

1.7K30

Rematch: Redux 的重新设计

难道现在状态管理不是一可以解决的问题?直观地说,开发人员似乎知道一隐藏的事实:状态管理的使用似乎比需要的更困难。...在本文中,我们将探讨一些你可能一直在问自己的问题: 你是否需要一用于状态管理的库? Redux 的受欢迎程度是否值得我们去使用? 为什么或者为什么不值得? 我们能否制定更好状态管理解决方案?...状态管理需要一 作为前端开发人员,不仅仅是布局,开发的真正艺术之一知道如何管理存储状态。简而言之:状态管理复杂的,但又并非那么复杂。...将所有内容都放在视图中可能会导致关注点的分离:它将与javascript视图库联系在一起,使代码更难测试,而且可能最大的麻烦:必须不断地思考和调整存储状态的位置。...一简单的 action 到底作为一动态类型的对象、一函数,还是一 Promise?这难道不是一种拙劣的实践? 如上图右边所示,难道我们就不能只使用 async/await ? 4.

1.5K50

如何在 React 应用中使用 Hooks、Redux 等管理状态

另一件重要的事情状态变化使 React 组件重新渲染的两原因之一(另一 props 的变化)。因此,状态存储了组件的信息同时也控制了它的行为。...一种比较防守型的方法向 setCount 传递一回调,如下所示:setCount(prevCount => prevCount+1)。 这样可以确保要更新的值最新的,并使我们远离上述问题。...如果我们需要让许多组件都可以使用它,把它放在 context 中真的好主意?或者我们是否可以把它提升一层次? Kent C Dodds 有一篇关于这个主题的很酷的文章。...那么 ReduxRedux 已经存在很长时间并且在 React 中被广泛使用的库。...提到 Redux Thunk 和 Redux Saga Redux thunk 和 Redux Saga Redux 一起使用的很流行的中间件库; 具体来说,Thunk 和 Saga 都是为了处理副作用或异步任务所使用

8.4K20

2021年50酷炫的Web和移动项目创意

您可以开发一应用程序,使您可以标记发现迷路动物的位置。...它可能平台,使开发人员可以轻松找到彼此并建立联系,并通过协作共同处理项目。因此,您不仅会获得快速便捷的现实世界体验,而且还将与技能水平相近的开发人员联系。...我认为这将是一好主意,因为它可以将招聘人员完全裁掉,并且您无需在面试中施加压力。但是,根据工作和从事此工作的开发人员的不同,可能会有某种形式的入职和测试。...一种解决方案创建一游戏库应用程序,以便您可以存储所有游戏历史记录。这可以包括年份,游戏,类型,平台等。即使您当前拥有或出售了它,也不管它是数字版本还是实物副本。...像体重,身高等… 编程级别:中级 项目类型:全栈 前端:HTML,CSS,JavaScript,React,Redux,React本机 后端:Node.Js,NoSQL 36.居室装饰应用 曾经努力想出一想要房间看起来如何的想法

3.9K20

为什么我不再用Redux

Redux React 生态系统中的革命性技术。它使我们能够在全局范围内存储不可变数据,并解决了在组件树中 prop-drilling 的问题。...需要在应用程序之间共享不可变数据时,它现在依旧一种可以方便扩展的优秀工具。 但是,为什么我们非得需要一全局存储呢?...Redux 不是缓存 使用 Redux 和类似的状态管理库时,大多数人都会遇到的一大问题,我们会将其视为后端状态的缓存。...后端状态的更简单方法 我认为有两库比使用 Redux(或类似的状态管理库)存储后端状态要好用很多。...要对比这个库和 Redux 的话,我们来看这两种方法的一代码示例。我使用常规 JS、React Hooks 和 axios 实现了一从服务器获取的简单 TODO 列表。

2.6K20

美团前端react面试题汇总

(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗API,学习成本远超redux-thunk,最重要的你的额外学习成本是只服务于这个库的,与...存储全局数据时,会有一问题,如果用户刷新了网页,那么通过redux存储的全局数据就会被全部清空,比如登录信息等。...但是在已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢?...了解redux

5.1K30

全栈React: React 30天

现在让我们来看一下,开始构建一更复杂的界面。 第5天 数据驱动 我们的应用中的硬编码数据不是好主意。 今天,我们将把我们的组件设置为由数据驱动,访问外部数据。...第12天 create-react-app 今天,我们将添加一构建过程来存储常见的构建操作,以便我们可以轻松地开发和部署我们的应用。...第20天 Redux动作 使用Redux,我们来谈谈我们如何在我们的应用中实际修改Redux状态。...第21天 Redux中间件 今天,我们在Redux方法中使用Redux中间件来管理我们的代码中的复杂状态变化。 第22天 测试简介 测试套件一项前期投资,可在系统的整个生命周期内获得回报。...本课程一系列文章,教你如何使用React从头开始。该系列提供了一循序渐进的过程,您可以使用它从一空文件夹中学习React到部署的React应用。 如果我被卡住了怎么办?

1.4K20

「前端架构」使用React进行应用程序状态管理

npm上有数百“更简单的Redux”的摘要)。尽管状态管理很难解决的问题,但我认为,使之如此困难的一原因我们经常过度设计解决问题的方法。...这就是我只在一项目中使用redux的原因:我经常看到开发人员把他们所有的状态都放到redux中。不仅是全局应用程序状态,还包括本地状态。...将所有应用程序状态都放在一对象中也会导致其他问题,即使您没有使用Redux。当一反应获取一新值,使用该值的所有组件都将更新并必须呈现,即使它是只关心部分数据的函数组件。...我知道我知道,我告诉过你不需要状态管理库,但我并不认为react query状态管理库。我认为这是藏匿处。这真是好主意。看看!坦纳·林斯利是聪明的小甜饼。 性能怎么样?...结论 同样,这是你可以用类组件来做的事情(你不必使用钩子)。钩子使这变得容易得多,但是您可以用React 15来实现这一理念。尽可能保持状态的本地性,并且只有在支柱钻井成为问题时才使用上下文。

2.9K30

使用 Redux 工具包简化状态管理

第一部分:理解 Redux Toolkit:Redux Toolkit 一组工具和约定,旨在使 Redux 开发更加简单。...它的核心概念“切片(slices)”,它们 Redux 存储的较小部分,负责管理应用程序状态的特定部分。这种方法有助于组织代码库并减少传统与 Redux 相关的样板代码。...第二部分:设置 Redux Toolkit:让我们从安装必要的包开始:npm install @reduxjs/toolkit react-redux现在,使用 createSlice 函数创建一基本的...连接:为了使 Redux 存储对组件可用,使用 react-redux 中的 Provider 组件:import React, { StrictMode } from 'react';import...结论:总之,Redux Toolkit 对于 Redux 应用程序的状态管理改变游戏规则的工具。其简单性和强大的特性使其成为现代前端开发的理想选择。

13700

企业级 React 项目的高级测试设置

在任何复杂应用中,测试至关重要的方面。测试不仅仅是为了提高覆盖率,其主要目的尽可能地模拟实际使用场景。最近,我需要为一庞大的ReactJS项目建立测试架构。让我展示给你我如何做的。...该项目已经在使用Enzyme进行测试。虽然Enzyme不错的库,但是react-testing-library测试React组件的更好选择。React团队也推荐使用它。...它将接受一store和一初始状态作为参数。这些你想要使用redux存储来测试组件的值。...现在,不再使用react-testing-library提供的默认渲染方法,你可以使用renderConnected函数测试你的组件,并传递你想要的存储部分。...测试导航比如说,你正在测试一FirstPage,点击按钮后导航到另一页SecondPage。你想测试这种行为。但问题SecondComponent尚未挂载....对

8300

技术创新,基于 React Native 的开源项目 | 码云周刊第 17 期

缓存就是一存储器,在技术选型中,常用 Redis 作为缓存数据库。...缓存主要是在获取资源方便性能优化的关键方面... 2、MyBatis 思维导图,让 MyBatis 不再难懂 (一) MyBatis 支持普通 SQL查询,存储过程和高级映射的优秀持久层框架。...我们将介绍以下主题: TensorFlow 的工作原理 什么机器学习模型 什么神经网络 神经网络如何学习 如何操作数据并将其传递给神经网络 如何运行模型并获得预测结果 码云推荐 1、使用 React...项目简介:Poplar React Native 实现的移动内容社区App,Spring框架实现其后台服务,提供Restful API访问,MySQL、Redis作为持久存储和数据缓冲。...Poplar关注社交和兴趣,使您能快速构建一移动内容社区。 5、管理信息的 Android 应用 InfoManager-redux ?

1.5K80

手摸手教你基于Hooks 的 Redux 实战姿势

原文:Redux Crash Course with Hooks ?[1] 作者:Chris Achard 译者:博轩 为保证文章的可读性,本文采用意译 ? 你对 Redux 感到困惑?...如果使用新的 Redux Hooks,会更加简单!这里关于 Redux 的速成班,将配合 React 函数组件使用: 1....Redux 使您可以集中存放 JavaScript 应用程序的状态(数据) 它最常与 React 一起使用(通过 react-redux ) 这使您可以从树中的任何组件访问或更改状态。 ? 2....应用的状态被集中存放于 Redux store 该 store 使用称为 “reducer” 的函数所创建的 reducer 接受一 state 和一 action , 并返回相同或新的状态 ?...重要的,reducer 返回一新的状态对象(而不是修改旧的对象的属性),这样,当对象中的属性发生某些改变时,组件将重新渲染。

1.5K20

前端高频react面试题

=id0的值也是1因为子元素相同,就不删除并更新,只做移动操作,这就提升了性能Redux 状态管理器和变量挂载到 window 中有什么区别两者都是存储数据以供后期使用。...这个问题就设计到了数据持久化, 主要的实现方式有以下几种:Redux: 将页面的数据存储redux中,在重新加载页面时,获取Redux中的数据;data.js: 使用webpack构建的项目,可以建一文件...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...额外的学习成本: redux-saga不仅在使⽤难以理解的 generator function,⽽且有数⼗API,学习成本远超redux-thunk,最重要的你的额外学习成本是只服务于这个库的,与...尽管 React 使用高度优化的 Diff 算法,但是这个过程仍然会损耗性能.Hooks可以取代 render props 和高阶组件?通常,render props和高阶组件仅渲染一子组件。

3.3K20
领券