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

如何在redux中处理多个输入值?

在redux中处理多个输入值,可以通过以下步骤实现:

  1. 定义多个输入字段的初始状态:在Redux的state中创建多个字段,每个字段对应一个输入值。例如,可以创建一个名为"input1"的字段和一个名为"input2"的字段。
  2. 创建对应的action类型:为每个输入字段创建不同的action类型,用于更新对应的输入值。
  3. 创建对应的action创建函数:为每个输入字段创建相应的action创建函数,用于创建更新对应输入值的action。每个函数应该返回一个包含type和payload的对象,其中type为对应的action类型,payload为新的输入值。
  4. 创建对应的reducer:为每个输入字段创建相应的reducer,用于处理对应的action,更新对应的输入值。每个reducer应该接收一个state和一个action作为参数,并根据action的type更新state中对应的字段的值。
  5. 合并reducers:使用Redux提供的combineReducers函数,将所有输入字段的reducer合并成一个根reducer。
  6. 在组件中使用输入字段的值:通过Redux提供的connect函数,将需要使用输入字段的组件连接到Redux的state,并将对应的输入字段传递给组件。

下面是一个简单的示例:

首先,定义初始状态和action类型:

代码语言:txt
复制
const initialState = {
  input1: '',
  input2: '',
};

const UPDATE_INPUT_1 = 'UPDATE_INPUT_1';
const UPDATE_INPUT_2 = 'UPDATE_INPUT_2';

然后,创建action创建函数:

代码语言:txt
复制
const updateInput1 = (value) => {
  return {
    type: UPDATE_INPUT_1,
    payload: value,
  };
};

const updateInput2 = (value) => {
  return {
    type: UPDATE_INPUT_2,
    payload: value,
  };
};

接下来,创建reducer:

代码语言:txt
复制
const input1Reducer = (state = initialState.input1, action) => {
  switch (action.type) {
    case UPDATE_INPUT_1:
      return action.payload;
    default:
      return state;
  }
};

const input2Reducer = (state = initialState.input2, action) => {
  switch (action.type) {
    case UPDATE_INPUT_2:
      return action.payload;
    default:
      return state;
  }
};

然后,合并reducers:

代码语言:txt
复制
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  input1: input1Reducer,
  input2: input2Reducer,
});

最后,在组件中使用输入字段的值:

代码语言:txt
复制
import { connect } from 'react-redux';

class MyComponent extends React.Component {
  render() {
    const { input1, input2, updateInput1, updateInput2 } = this.props;

    return (
      <div>
        <input value={input1} onChange={(e) => updateInput1(e.target.value)} />
        <input value={input2} onChange={(e) => updateInput2(e.target.value)} />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    input1: state.input1,
    input2: state.input2,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    updateInput1: (value) => dispatch(updateInput1(value)),
    updateInput2: (value) => dispatch(updateInput2(value)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

这样,你就可以在Redux中处理多个输入值了。对应的输入字段会通过Redux的state进行管理,并且可以在组件中使用Redux提供的connect函数连接到state和action创建函数。

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

相关·内容

浅谈如何在项目中处理页面多个网络请求

在开发很多时候会有这样的场景,同一个界面有多个请求,而且要在这几个请求都成功返回的时候再去进行下一操作,对于这种场景,如何来设计请求操作呢?今天我们就来讨论一下有哪几种方案。...分析: 在网络请求的开发,经常会遇到两种情况,一种是多个请求结束后统一操作,在一个界面需要同时请求多种数据,比如列表数据、广告数据等,全部请求到后再一起刷新界面。...来看一下下面几种方案: dispatch_semaphore 信号量 信号量是一个整数,在创建的时候会有一个初始,这个初始往往代表我要控制的同时操作的并发数。...在 GCD ,提供了以下这么几个函数,可用于请求同步等处理,模拟同步请求: // 创建一个信号量(semaphore) dispatch_semaphore_t semaphore = dispatch_semaphore_create...有时候必须等待任务完成的结果,然后才能继续后面的处理

3.5K31
  • React Native+React Navigation+Redux开发实用教程

    为了帮助大家快速上手在React Native与Redux开发,在这本文中将向大家介绍如何在React Native中使用Redux?,以及一些必备基础以及高级知识。...那么如何在React Native中使用Redux和react-navigation组合?呢?...在Redux+react-navigation场景处理 Android 的物理返回键 在Redux+react-navigation场景处理Android的物理返回键需要注意当前路由的所以位置,...当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store; redux一个特点是:状态共享,所有的状态都放在一个store,任何component都可以订阅store的数据...; 并不是所有的state都适合放在store,这样会让store变得非常庞大,某个状态只被一个组件使用,不存在状态共享,可以不放在store; 参考 新版React Native+Redux打造高质量上线

    3.9K10

    React Native+Redux开发实用教程

    为了帮助大家快速上手在React Native与Redux开发,在这本文中将向大家介绍如何在React Native中使用Redux?,以及一些必备基础以及高级知识。...那么如何在React Native中使用Redux?呢? 准备工作 根据需要安装以下组件。...这里通过Redux提供的combineReducers方法,将多个reducer聚合成一个rootReducer。...当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store; redux一个特点是:状态共享,所有的状态都放在一个store,任何component都可以订阅store的数据...; 并不是所有的state都适合放在store,这样会让store变得非常庞大,某个状态只被一个组件使用,不存在状态共享,可以不放在store; 参考 新版React Native+Redux打造高质量上线

    4.5K20

    【19】进大厂必须掌握的面试题-50个React面试

    在React,事件是对特定动作(鼠标悬停,鼠标单击,按键等)的触发反应。处理这些事件类似于处理DOM元素的事件。...每个事件类型都包含其自己的属性和行为,这些属性和行为只能通过其事件处理程序进行访问。 23.如何在React创建事件?...因此,元素无法直接更新其状态,并且其提交由JavaScript函数处理。此功能可以完全访问用户输入到表单的数据。...它根据操作的类型确定需要执行哪种更新,然后返回新。如果不需要完成任何工作,它将按原样返回以前的状态。 43.在Redux存储的意义是什么?...应用程序的整个状态/对象树保存在单个存储。因此,Redux非常简单且可预测。我们可以将中间件传递给商店以处理数据处理,并保留更改商店状态的各种操作的日志。所有动作都通过减速器返回新状态。 44.

    11.2K30

    通过五个真实应用场景,深入理解如何使用 TypeScript 枚举(enum)

    然后,我们使用这个枚举在 handlePlayerInput 函数处理玩家的输入。 为什么要用枚举? 代码更清晰:使用枚举后,代码更具可读性。...易于维护:如果需要添加新的方向或修改现有的方向,只需在枚举中进行修改,而不需要在多个地方进行字符串替换。 总之,枚举让代码更加直观和可靠,是组织和管理固定选项集合的有效工具。...在 Redux Toolkit ,管理这些状态非常常见。 在 Redux Toolkit 应用枚举 假设我们有一个 Redux slice 来管理异步数据获取操作的状态。...4、在组件中使用: 使用 useDispatch 和 useSelector 访问 Redux 状态和 dispatch actions。 在 useEffect 中发起异步请求,处理不同的状态。...希望这个例子能帮助你更好地理解如何在 Redux Toolkit 中使用枚举来管理异步操作状态。

    27610

    ReactRedux

    现在我们可以开发一个函数来做为主 reducer,它调用多个子 reducer 分别处理 state 的一部分数据,然后再把这些数据合成一个大的单一对象。...它应该是完全可预测的:多次传入相同的输入必须产生相同的输出。它不应做有副作用的操作, API 调用或路由跳转。这些应该在 dispatch action 前发生。...Redux 原生提供combineReducers()辅助函数,来把根 reducer 拆分成多个函数,用于分别处理 state 树的一个分支。...,当我们在输入输入不同的时,会显示不同的“hello,___”问候语,由此可以分析出该应用只有一个状态,那就是{ userName: '张三'} 展示组件 该应用只有一个展示组件HelloPanel...: HelloPanel 用于显示输入框及展示数据 userName: 要展示的数据 onChange(userName) : 当输入发生变化时调用的回调函数 该组件之定义外观并不涉及数据从哪里来

    4K20

    必须要会的 50 个React 面试题(下)

    它们可以接受子组件提供的任何动态,但不会修改或复制其输入组件的任何行为。你可以认为 HOC 是“纯(Pure)”组件。 31. 你能用HOC做什么?...Data Flow in Redux 41. 如何在 Redux 定义 Action? React 的 Action 必须具有 type 属性,该属性指示正在执行的 ACTION 的类型。...它根据操作的类型确定需要执行哪种更新,然后返回新的。如果不需要完成任务,它会返回原来的状态。 43. Store 在 Redux 的意义是什么?...应用程序的整个状态/对象树保存在单一存储。因此,Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据,并记录改变存储状态的各种操作。...虽然 用于封装 Router 多个路由,当你想要仅显示要在多个定义的路线呈现的单个路线时,可以使用 “switch” 关键字。

    3.5K21

    每日两题 T35

    示例1 : 输入: nums = [4,5,6,7,0,1,2], target = 0 输出: 4 示例2: 输入: nums = [4,5,6,7,0,1,2], target = 3 输出: -1...随着应用不断变大,你应该把根级的 reducer 拆成多个小的 reducers,分别独立地操作 state 树的不同部分,而不是添加新的 stores。...你可能已经用了 redux-thunk 来处理数据的读取。不同于 redux thunk,你不会再遇到回调地狱了,你可以很容易地测试异步流程并保持你的 action 是干净的。...redux-saga与其他redux中间件比较 •redux-thunk 的缺点在于api层与store耦合,优点是可以获取到各个异步操作时期状态的,比较灵活,易于控制 •redux-promise的优点是...api层与store解耦,缺点是对请求失败,请求的情形没有很好的处理redux-saga 的优点是api层与store解耦,对请求,请求失败都有完善的处理,缺点是代码量较大 References

    77530

    何在前端编码时实现人肉双向编译

    本文作者:IMWeb yisbug 原文出处:IMWeb社区 未经同意,禁止转载 如何在前端编码时实现人肉双向编译 React+flux是目前最火的前端解决方案之一,但flux槽点颇多,例如store...个人理解它的主要特性体现在以下几点: 强制使用一个全局的store,store只提供了几个简单的api(实际上应该是4个),subscribe/dispatch(订阅、发布),getState,replaceReducer...简单一点说,就是去掉了flux组件和store的unbind/bind环节。当state变化时,自动更新components,不需要手动操作。...对全局的数据state的操作,由多个reducer完成。每个reducer都是一个纯函数,接收两个参数state和action,返回处理后的state。这点类似管道的操作。...接下来我们可以回答标题的问题了,即:如何在前端编码时实现人肉双向编(zi)译(can)。 其实就是使用coffee来编写react+redux应用。 我们来写个简单的hello world玩玩。

    2.2K50

    探索 React 状态管理:从简单到复杂的解决方案

    在这篇博文中,我们将探讨React多个状态管理示例,从基本的useState()到更高级的库,比如Redux,同时强调使用Context API等简单解决方案的好处。让我们开始吧!...在Parent组件,我们定义了要共享的,这里是“Hello from Parent”。我们将Child组件包装在Provider组件内部,并使用value属性传递。...在Child组件,我们使用useContext钩子从上下文中获取共享。我们可以直接访问,无需通过props传递。在这种情况下,将是“Hello from Parent”。...通过一个逐步的例子,我们演示了如何将Redux集成到React应用程序以有效地处理状态更改。...然后,我们定义了一个减速器函数,根据分派的动作处理状态更新。我们使用Redux的createStore函数创建一个Redux store,并将减速器传递给它。

    45231

    2021前端react面试题汇总

    )和动作(action) Derivation(衍生)∶ 从应用状态中派生而出,且没有任何其他影响的数据 对比总结: redux将数据保存在单一的store,mobx将数据保存在分散的多个store...受控组件更新state的流程: 可以通过初始state设置表单的默认 每当表单的发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state 一旦通过...setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的就必须每个都要编写事件处理函数...在非受控组件,可以使用一个ref来从DOM获得表单。而不是为每个状态更新编写一个事件处理程序。...DOM如果是现用现取的称为非受控组件,而通过setState将输入维护到了state,需要时再从state取出,这里的数据就受到了state的控制,称为受控组件。

    2K20

    2021前端react面试题汇总

    )和动作(action) Derivation(衍生)∶ 从应用状态中派生而出,且没有任何其他影响的数据 对比总结: redux将数据保存在单一的store,mobx将数据保存在分散的多个store...受控组件更新state的流程: 可以通过初始state设置表单的默认 每当表单的发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state 一旦通过...setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的就必须每个都要编写事件处理函数...在非受控组件,可以使用一个ref来从DOM获得表单。而不是为每个状态更新编写一个事件处理程序。...DOM如果是现用现取的称为非受控组件,而通过setState将输入维护到了state,需要时再从state取出,这里的数据就受到了state的控制,称为受控组件。

    2.3K00

    一天梳理完react面试高频题

    这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...(1)获取URL的参数get传路由配置还是普通的配置,:'admin',传参方式:'admin?id='1111''。...动态路由传路由需要配置成动态路由:path='/admin/:id',传参方式,'admin/111'。...通过this.props.match.params.id 取得url的动态路由id部分的,除此之外还可以通过useParams(Hooks)来获取通过query或state传传参方式:在Link...props 是什么react的核心思想是组件化,页面被分成很多个独立,可复用的组件而组件就是一个函数,可以接受一个参数作为输入,这个参数就是props,所以props就是从外部传入组件内部的数据由于react

    4.1K20

    你要的 React 面试知识点,都在这了

    通常,组件是一个javascript函数,它接受输入处理它并返回在UI呈现的React元素。 在React中有不同类型的组件。让我们详细看看。...表单元素通常维护它们自己的状态,而react则在组件的状态属性维护状态。我们可以将两者结合起来控制输入表单。这称为受控组件。因此,在受控组件表单,数据由React组件处理。 这里有一个例子。...有一种称为非受控组件的方法可以通过使用Ref来处理表单数据。在非受控组件,Ref用于直接从DOM访问表单,而不是事件处理程序。 我们使用Ref构建了相同的表单,而不是使用React状态。...我们使用React.createRef() 定义Ref并传递该输入表单并直接从handleSubmit方法的DOM访问表单。...connect和bindActionCreators来自 redux。 前者用于连接 store ,第22行,后者用于将 action creators 绑定到你的 props ,第20行。

    18.5K20

    2022前端社招React面试题 附答案

    )和动作(action) Derivation(衍生)∶ 从应用状态中派生而出,且没有任何其他影响的数据 对比总结: redux将数据保存在单一的store,mobx将数据保存在分散的多个store...受控组件更新state的流程: 可以通过初始state设置表单的默认 每当表单的发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state 一旦通过...setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的就必须每个都要编写事件处理函数...在非受控组件,可以使用一个ref来从DOM获得表单。而不是为每个状态更新编写一个事件处理程序。...DOM如果是现用现取的称为非受控组件,而通过setState将输入维护到了state,需要时再从state取出,这里的数据就受到了state的控制,称为受控组件。

    1.7K40

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

    (译者注:Javascript的对象存储时均是由和指向的引用两个部分构成。此处突变指直接修改引用所指向的, 而引用本身保持不变。)...再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store。... “玛丽喜欢42号文章。” 或者 “任务列表里添加了'学习 Redux 文档'”。 你可以在任何地方调用 store.dispatch(action),包括组件、XHR 回调、甚至定时器。...它应该是完全可预测的:多次传入相同的输入必须产生相同的输出。它不应做有副作用的操作, API 调用或路由跳转。这些应该在 dispatch action 前发生。...Redux 原生提供combineReducers()辅助函数,来把根 reducer 拆分成多个函数,用于分别处理 state 树的一个分支。

    3.7K10

    何在前端编码时实现人肉双向编译

    本文作者:IMWeb yisbug 原文出处:IMWeb社区 未经同意,禁止转载 如何在前端编码时实现人肉双向编译 React+flux是目前最火的前端解决方案之一,但flux槽点颇多,例如store...个人理解它的主要特性体现在以下几点: 强制使用一个全局的store,store只提供了几个简单的api(实际上应该是4个),subscribe/dispatch(订阅、发布),getState,replaceReducer...简单一点说,就是去掉了flux组件和store的unbind/bind环节。当state变化时,自动更新components,不需要手动操作。...对全局的数据state的操作,由多个reducer完成。每个reducer都是一个纯函数,接收两个参数state和action,返回处理后的state。这点类似管道的操作。...接下来我们可以回答标题的问题了,即:如何在前端编码时实现人肉双向编(zi)译(can)。 其实就是使用coffee来编写react+redux应用。 我们来写个简单的hello world玩玩。

    1.4K20

    学习react-redux,看这篇文章就够啦!

    return newState; default: // 默认情况下,返回当前状态,不做任何改变 return state; } } 一个 Redux 应用可以有多个...通过这种方式,一个 Redux 应用可以同时管理多个相关联的状态。...mapStateProps 函数返回一个对象,数据结构的键值对,就是一个映射关系,: const mapStateToProps = (state) => { return { todos...下面是常用的 hooks 函数以及用法 # useSelector useSelector:用于选择 Redux store 感兴趣的状态。它接受一个选择器函数作为参数,并返回选择器函数返回的。...2、vuex 只适用于 vue 框架之中 # 设计上 1、redux redux 不可以直接修改原始 state 数据,需要拷贝原数据进行修改 不可执行异步操作,但可以通过中间件处理异步操作 2、vuex

    28420

    何在已有的 Web 应用中使用 ReactJS

    当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如何从头开始,但却很难运用到实际工作。...共享状态 可以看一下你的应用的功能状态是独立 isolated 于 container 元素还是在多个元素中共享 shared 。...所有按钮、输入框等的交互状态都由这个 wrapper / container 元素分享。 共享状态 - 这种状态由多个元素共享。比如,从页面其它位置的日期下拉框更新日历。...使用 Redux 分享状态 类似 Redux(flux 的另一种实现)的库可以很容易的实现应用不同组件之间的通信。...主要的解决方法就是,如果你使用 jQuery 处理 UI 片段,那么你可以将容器元素替换成一个 React 组件。如果你需要在多个组件中分享状态,那么你可以使用容器方法或者类似 Redux 的库。

    14.5K00
    领券