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

React + redux。在reducer中调度事件时。两个reducers获得相同的数据

React是一个用于构建用户界面的JavaScript库,而Redux是一个用于管理应用程序状态的JavaScript库。在React中,Redux通常与React一起使用,以便更好地管理应用程序的状态和数据流。

在使用Redux时,我们可以将应用程序的状态存储在一个称为"store"的中央存储库中。而"reducer"是一个纯函数,用于处理和更新存储库中的状态。当我们在reducer中调度事件时,两个reducers获得相同的数据,意味着它们都可以访问相同的状态数据。

在Redux中,可以使用"combineReducers"函数将多个reducer组合成一个根reducer。这样做的好处是可以将应用程序的状态分割成多个独立的部分,每个reducer负责管理其中一个部分的状态。当调度事件时,所有相关的reducer都会被调用,并且它们都可以访问相同的数据。

对于这个问题,如果两个reducers需要获得相同的数据,可以在它们各自的reducer中访问相同的状态数据。可以通过在reducer中使用Redux提供的"getState"函数来获取存储库中的当前状态。然后,可以根据需要从状态中提取所需的数据,并在reducer中进行处理。

以下是一个示例代码片段,展示了如何在两个reducers中获得相同的数据:

代码语言:txt
复制
// reducer1.js
const reducer1 = (state = initialState, action) => {
  // 获取存储库中的当前状态
  const currentState = getState();

  // 从状态中提取所需的数据
  const data = currentState.data;

  // 在reducer中处理数据
  // ...

  return newState;
};

// reducer2.js
const reducer2 = (state = initialState, action) => {
  // 获取存储库中的当前状态
  const currentState = getState();

  // 从状态中提取所需的数据
  const data = currentState.data;

  // 在reducer中处理数据
  // ...

  return newState;
};

// rootReducer.js
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  reducer1,
  reducer2,
});

export default rootReducer;

在上述示例中,reducer1和reducer2都可以通过调用Redux提供的"getState"函数来获取存储库中的当前状态。然后,它们可以从状态中提取所需的数据,并在各自的reducer中进行处理。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法提供相关链接。但是,腾讯云提供了丰富的云计算服务,您可以访问腾讯云官方网站以获取更多信息。

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

相关·内容

React中的Redux

学习必备要点: 首先弄明白,Redux在使用React开发应用时,起到什么作用——状态集中管理 弄清楚Redux是如何实现状态管理的——store、action、reducer三个概念 在React中集成...store是一个类似数据库的存储(或者可以叫做状态树),需要设计自己的数据结构来在状态树中存储自己的数据。 Redux入门 Redux简介 Redux是一个状态集中管理库。...store-tree.png so,存储在store中的数据结构是由reducer确定的。 数据流 严格的单向数据流 是Redux架构的核心设计。...下面会介绍传入 reducer 函数需要满足的规则。 之前的文档曾建议使用 ES6 的 import * as reducers 语法来获得 reducer 对象。...返回值 (Function):一个调用 reducers 对象里所有 reducer 的 reducer,并且构造一个与 reducers 对象结构相同的 state 对象。

4K20

医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

而 React-redux 就是把 Redux 这种架构模式和 React.js 结合起来的一个库,就是 Redux 架构在 React.js 中的体现。...React-Redux Redux 本身和React没有关系,只是数据处理中心,是React-Redux让他们联系在一起。 React-rRedux提供两个方法:connect和Provider。...在高级篇里会介绍如何执行有副作用的操作。现在只需要谨记 reducer 一定要保持纯净。只要传入参数相同,返回计算得到的下一个 state 就一定相同。...(译者注:Javascript中的对象存储时均是由值和指向值的引用两个部分构成。此处突变指直接修改引用所指向的值, 而引用本身保持不变。)...再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store。

3.7K10
  • React面试之生命周期与状态管理

    React 生命周期 在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用,并且也引入了新的 2 个 API 来解决问题。...Fiber 本质上是一个虚拟的堆栈帧,新的调度器会按照优先级自由调度这些帧,从而将之前的同步渲染改成了异步渲染,在不影响体验的情况下去分段计算更新。 对于如何区别优先级,React 有自己的一套逻辑。...` ,该函数会在初始化和 `update` 时被调用 // 因为该函数是静态函数,所以取不到 `this` // 如果需要对比 `prevProps` 需要单独在 `state` 中维护 static...componentDidMount() {} // 用于获得最新的 DOM 数据 getSnapshotBeforeUpdate() {} // 组件即将销毁 // 可以在此处移除订阅...[key] // state 树下的 key 是与 finalReducers 下的 key 相同的 // 所以你在 combineReducers 中传入的参数的 key 即代表了

    30840

    【案例】使用React+redux实现一个Todomvc

    (类似于 vue中的vuex) Redux和React是两个独立的工具/ 三个核心概念 action(动作/行为):【对象格式】描述要做的事(例如:登陆、退出、增删改查等等…) reducer(函数):...store/reducers/index.js 中合并单独的reducer并导出 // 模块合并 并导出 import todos from '....default rootReducer 在store/index.js中挂载 reducer和action // 创建仓库,挂载reducers 并导出 import { createStore }...中,使用筛选(未完成/已完成/全部)后的状态来循环渲染列表项 // 筛选出已完成or未完成or全部的项 // 传入两个参数-参数1:所有数据;参数2:过滤条件 const visibleTodos...从浏览器本地存储中得到状态,如果状态存在,仓库中的数据更新为本地存储的数据。

    7410

    一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

    而 Reducer 是一个纯函数,对于相同的输入,永远都只会有相同的输出,不会影响外部的变量,也不会被外部变量影响,不得改写参数。...在 Redux 中,同步的表现就是:Action 发出以后,Reducer 立即算出 State。那么异步的表现就是:Action 发出以后,过一段时间再执行 Reducer。...把UI组件的事件映射到 dispatch 方法 Redux-saga 刚才介绍了两个Redux 处理异步的中间件 redux-thunk 和 redux-promise,当然 redux 的异步中间件还有很多...redux-saga 把异步获取数据这类的操作都叫做副作用(Side Effect),它的目标就是把这些副作用管理好,让他们执行更高效,测试更简单,在处理故障时更容易。...异步数据获取的相关业务逻辑放在了单独的 saga.js 中,不再是掺杂在 action.js 或 component.js 中。

    5.5K10

    用 Redux 做状态管理,真的很简单🦆!

    Store(存储) 中 单一数据源使得同构应用开发变得容易,将状态在统一的 对象树 中维护管理也会更加容易!...(2) 单向数据流(one-way data flow) Redux 单向数据流 用 state 来描述应用程序在特定时间点的状况 基于 state 来渲染出 View 当发生某些事情时(例如用户单击按钮...(4) 纯函数更新 state 纯函数: 相同的输入,总是会得到相同的输出,并且在执行过程中没有任何副作用的函数。..."; // 在 store/index.ts 中声明的类型 // 借助 createSlice 创建 reducer、action const CounterSlice = createSlice({...简单总结一下: 推荐在 React 项目中使用 Redux 作为状态管理 需要掌握 Redux 中的设计思想 推荐使用 @redux-toolkit,可降低心智负担,显著提升研发效率 当掌握 @redux-toolkit

    3.5K40

    状态管理的概念,都是纸老虎

    而 Reducer 是一个纯函数,对于相同的输入,永远都只会有相同的输出,不会影响外部的变量,也不会被外部变量影响,不得改写参数。...在 Redux 中,同步的表现就是:Action 发出以后,Reducer 立即算出 State。那么异步的表现就是:Action 发出以后,过一段时间再执行 Reducer。...把UI组件的事件映射到 dispatch 方法 Redux-saga 刚才介绍了两个Redux 处理异步的中间件 redux-thunk 和 redux-promise,当然 redux 的异步中间件还有很多...redux-saga 把异步获取数据这类的操作都叫做副作用(Side Effect),它的目标就是把这些副作用管理好,让他们执行更高效,测试更简单,在处理故障时更容易。...和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:异步数据获取的相关业务逻辑放在了单独的 saga.js 中,不再是掺杂在 action.js 或 component.js

    5.3K20

    react+redux+webpack教程2

    这个仓库的代码在stores/index.js里面。 代码很简单,就是用reducers和initialState两个参数来创建一个仓库。...我们考虑一下仓库的数据是要变化的,怎么让它变化呢?我们得给个规则,这个规则描述起来就是: “在发生某一动作(action)时,仓库中的一部分数据要进行相应的变化”。...当change事件被触发时,通过this.props.dispatch函数就可以通知仓库有动作发生了, 仓库此时就会调用所有的reducer来应对这个事件。 好了,到这里小小的双向绑定功能实现了?...在MVVM框架里只需要建立一个视图模型,用一对双大括号就能完成的事情,到react加redux里面为何如此大费周折? 其实我是专门在展示完整的redux+react开发流程。...纯函数就像这个流水线中的工序,让数据处理的过程简单明了。 发现了吗?前面的代码中纯函数是主力。reducer很明显是纯函数。

    1.3K70

    Redux

    来自服务端的state可以在无需编写更多代码的情况下被序列化并注入到客户端中。...在传统的Flux中,当调用action创建函数时,一般会触发一个dispatch: function addTodoWithDispatch(text) { const action = {...在Redux应用中,所有的state都被保存在一个单一对象中,在写代码前应该先想一下这个对象的结构。如何才能以最简的形式把应用的state用对象描述出来。 ​...Redux应用只有一个单一的store。当需要拆分数据逻辑时,应该使用reducer组合而不是创建多个store。 数据流 ​ 严格的单向数据流是Redux结构的核心设计。 ​...Redux应用中数据的声明周期遵循4个步骤: 1、调用store.dispatch(action)。 2、Redux store调用传入的reducer函数。

    1.8K20

    把redux当做观察者单独使用

    我们知道在观察者模式中,观察者对象一般会有两个方法,一个用来监听事件,一个用来发布消息,另外其内部一般有一个不可以见的属性来存储事件,这个属性通常为一个数组。...的subscribe方法监听事件,用dispatch方法更改store触发事件 需要注意的是,我们在调用disptach的时候需要传递一个名为action的对象,对象有两个属性type,store通过...上面的代码是有点需要优化的,我们在开发时,store往往比较复杂,我们需要将不同的状态保存到不同的reducer中,而不是统一放在一起。...在开发中通常我们使用dispatch时一般是传递一个对象,但是有时为了方便,我们通常将action作为函数的返回值,代码如下: // 生成action的函数 function createAction...综上所述,想要向dispatch传递函数,使其支持异步调用需要如下两个步骤: 1、引入redux-thunk 2、在调用createStore时传入插件,插件需要用applyMiddleware包装一下

    1.5K21

    应用connected-react-router和redux-thunk打通react路由孤立

    redux 在我们开发过程中,很多时候,我们需要让组件共享某些数据,虽然可以通过组件传递数据实现数据共享,但是如果组件之间不是父子关系的话,数据传递是非常麻烦的,而且容易让代码的可读性降低,这时候我们就需要一个...在下面的场景中,引入 Redux 是比较明智的: 你有着相当大量的、随时间变化的数据 你的 state 需要有一个单一可靠数据来源 你觉得把所有 state 放在最顶层组件中已经无法满足需要了 的确,这些场景很主观笼统...到 react 应用 合并 reducer 在一个 react 应用中只有一个 store,组件通过调用 action 函数,传递数据到 reducer,reducer 根据数据更改对应的 state...store 并可以从中获得 2)可以使用 Redux 的 dispatch action 来导航 3)集成 Redux 可以支持在 Redux devtools 中路由改变的时间履行调试集成的必要性:...包裹 root reducer 并且提供我们创建的history对象,获得新的 root reducer 使用routerMiddleware(history)实现使用 dispatch history

    2.4K00

    redux-form的学习笔记

    redux是一种常用的与react框架搭配的一种数据流架构,而伴随着redux的出现,也出现了许多基于redux开源的第三方库,而redux-form就是其中之一的开源组件库,到今天我写下这篇笔记为止,...在github上获得了5580颗star和654颗的fork数,今天就写一下我的redux-form的学习笔记吧 左转redux-form的api文档地址:http://redux-form.com/6.5.0...的相关依赖) 2在入口文件中写入以下代码: import { createStore, combineReducers } from 'redux' import { reducer as formReducer....., form:formReducer } 然后通过redux-form的接口,就可以实现在表单中输入的内容与state对象中form表单数据的同步了 我下面将写两个文件index.js和form.js...} from 'react-redux' import { reducer as formReducer } from 'redux-form' // 导入我的form表单组件,位于同一目录下的form.js

    1K90

    React Native+React Navigation+Redux开发实用教程

    在使用 React Navigation 的项目中,想要集成 redux 就必须要引入 react-navigation-redux-helpers 这个库。...在Redux+react-navigation场景中处理 Android 中的物理返回键 在Redux+react-navigation场景中处理Android的物理返回键需要注意当前路由的所以位置,...返回值 (Function):一个调用 reducers 对象里所有 reducer 的 reducer,并且构造一个与 reducers 对象结构相同的 state 对象。...单一数据源; 所有数据都是只读的,要想修改数据,必须 dispatch 一个 action 来描述什么发生了改变; 当处理 action 时,必须生成一个新的 state,不得直接修改原始对象; Redux...当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store; redux一个特点是:状态共享,所有的状态都放在一个store中,任何component都可以订阅store中的数据

    4K10

    Redux 快速上手指南

    Redux基于简化版本的Flux框架,Flux是Facebook开发的一个框架。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。...任何UI组件都可以直接从store访问特定对象的状态。 在Redux中,所有的数据(比如state)被保存在一个被称为store的容器中 ,在一个应用程序中只能有一个store对象。...当然,有一个很技巧性的方式,是把父组件中的方法声明由props传递给子组件,然后在子组件触发事件时,调用这个父组件的方法,以此来达到子组件对父组件的沟通,间接来更动父组件中的state。...在简单的应用程序中,这沟通方式还可行,但如果是在有复杂的组件嵌套阶层结构时,例如层级很多或是不同树状结构中的子组件要互相沟通时,这个作法是派不上用场的。...payload - 用于更新状态的数据。 创建一个Redux存储区,它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问,但只能通过提供的reducer进行更新。

    1.3K20

    React 和 Redux 的动态导入

    通过使用 React 来处理每个模块的加载,我们可以在应用程序的任何时间延迟加载组件,这包括嵌套模块。 使用 Redux 到目前为止,我们已经演示了如何动态加载应用程序的模块。...然而,我们仍然需要在加载时将正确的数据输入到我们的模块中。 让我们来看看如何将 redux 存储连接到模块。 我们已经通过公开每个模块的视图组件为每个模块创建了一个 API。...我们可以通过暴露每个模块的 reducer 来扩展它。 还需要公开一个名称,在该名称下我们的模块状态将存在于应用程序的store 中。...但是我们需要先对我们的 store 做更多的工作。我们需要能够在模块加载时注册模块的 reducer。因此,当我们的模块 dispatche 一个 action 时,我们的 store 就会更新。...当 react-redux 组件将 store 添加到上下文中时,只需要使用 contextTypes 在LazyLoadModule 中获取它。

    2.2K00

    【React】211- 2019 React Redux 完全指南

    在本篇 Redux 教程中,我会渐进地解释如何将 Redux 与 React 搭配使用 —— 从简单的 React 开始 —— 以及一个非常简单的 React + Redux 案例。...在 React 应用中添加 Redux 在 CodeSandbox 中,展开左侧的 Dependencies 选项,然后点击 Add Dependency。...调用的时候携带 action,Redux 调用 reducer 时就会携带 action(然后 reducer 的返回值会更新 state)。 我们在 store 上试试看。...如何在 React 中使用 Redux 此时我们有个很小的带有 reducer 的 store,当接收到 action 时它知道如何更新 state。...如果你实质上复制参数(state)给一个跟 state 相同的对象,这有什么意义呢? 在很小的例子中,可能会传全部 state,但通常你只会从更大的 state 集合中选择部分组件需要的数据。

    4.3K20

    Redux开发实用教程

    可以看到,在整个流程中数据都是单向流动的。 Redux和Flux的对比 Redux是Flux思想的一种实现,同时又在其基础上做了改进。...虽然React 试图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是,React 依旧把处理 state 中数据的问题留给了你。Redux就是为了帮你解决这个问题。...提示:reducer 是纯函数。它仅仅用于计算下一个 state。它应该是完全可预测的:多次传入相同的输入必须产生相同的输出。它不应做有副作用的操作,如 API 调用或路由跳转。...在 default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的 state。...当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store; redux一个特点是:状态共享,所有的状态都放在一个store中,任何component都可以订阅store中的数据

    1.4K20

    理解 React 中的 Redux-Thunk

    你可以用来处理推迟任何事件的计算或者评估的函数,并且 React-Thunk 可以有效地充当应用程序的单独线程。...请注意,Reducer 是一个纯函数;因此它不能用于处理 API 调用。它不应该造成副作用,也不应该直接改变 state。 在 React 中,你不应该直接更改 state。...使用这两个可以让人们轻松了解数据如何流动以及 state 何时发生变化。 Redux 首先复制 state,然后重写你想更改 state 的值。...怎么使用 Redux Thunk: 构建一个购物车 在本教程中,我们将使用 Redux Thunk 开发一个简单的购物车功能,更好地明白 Thunk 怎么工作。...为了连接 Redux store,我们在 products.json 文件中模拟些数据: // product.json [ {"id": 1, "title": "Strawberry ice-cream

    54820
    领券