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

如何将redux-form/immutable与纯不可变库一起使用?

将redux-form/immutable与纯不可变库一起使用的方法如下:

  1. 首先,确保你已经安装了redux-form和immutable库。可以使用以下命令进行安装:
代码语言:txt
复制
npm install redux-form immutable
  1. 在Redux应用的根目录中创建一个名为reducers.js的文件,并导入所需的库和模块:
代码语言:txt
复制
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form/immutable';
import { Map } from 'immutable';
  1. 创建一个名为initialState的初始状态对象,并使用immutable的Map函数将其转换为不可变的Map对象:
代码语言:txt
复制
const initialState = Map({
  // 初始状态数据
});
  1. 创建一个名为rootReducer的根reducer函数,并使用combineReducers函数将formReducer与其他reducer函数合并:
代码语言:txt
复制
const rootReducer = combineReducers({
  form: formReducer,
  // 其他reducer函数
});
  1. 创建一个名为configureStore的函数,并在其中创建Redux store,并将初始状态对象传递给createStore函数:
代码语言:txt
复制
import { createStore } from 'redux';

const configureStore = () => {
  const store = createStore(
    rootReducer,
    initialState,
    // 可选的中间件
  );

  return store;
};

export default configureStore;
  1. 在应用的入口文件中,使用Provider组件将Redux store与应用程序连接起来,并将configureStore函数返回的store作为属性传递给Provider组件:
代码语言:txt
复制
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './configureStore';
import App from './App';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

现在,你已经成功地将redux-form/immutable与纯不可变库一起使用了。你可以在Redux应用中使用redux-form的表单功能,并利用immutable库提供的不可变数据结构来管理应用的状态。

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

相关·内容

VueReact的区别之我见

使用react和vue,主要是理解他们的设计思路的不同。...1.数据是不是可变的 react整体是函数式的思想,把组件设计成组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。...所以react结合typescript更容易一起写,vue稍微复杂。 ?...Vue也不是不能实现高阶组件,只是特别麻烦,因为Vue对组件的option做了各种处理,想实现高阶组件就要知道每一个option是怎么处理的,然后正确的设置。具体有多复杂,可以参考下面的文章。...) react整体的思路就是函数式,所以推崇组件,数据不可变,单向数据流,当然需要双向的地方也可以做到,比如结合redux-form,而vue是基于可变数据的,支持双向绑定。

1.7K40
  • React 组件优化

    immer 就是为了解决这个问题的。它是 mbox 的作者的另一个作品, mobx 一样简单易用。...而 immer 轻量、简洁、易上手、并且使用起来也非常的舒服,不会产生容易把 immutable 数据类型原生 JS 数据类型搞混的情况。 3....使用时需要先下载: npm install formik --save Formik 可以 yup 一块使用的作者也推荐搭配使用,yup 是一个用于验证字段的,它的用法类似于 React 中的...使用 Formik + yup 实现了验证逻辑组件的解耦,验证逻辑统一由 yup 管理。 相对于 redux-form ,我觉得 formik 更好用一些吧。...,这对于小型应用程序来说很好,但是随着 Redux 应用程序的增长,使用 Redux-Form,则输入延迟将继续增加。

    7.2K20

    「首席架构师推荐」React生态系统大集合

    - 使用React钩子绘制SVG 模型 mori - ClojureScript的持久数据结构和支持API NestedTypes - 具有“渲染”支持的快速可变模型 swarm - JavaScript...复制模型(MVC的M) caplet - JavaScript模型 数据管理 Immutable.js - Javascript的不可变数据集合 cortex - 用于使用React集中管理数据的JavaScript... avers - 一个现代客户端模型抽象 imvvm - React的不可变模型 - 视图 - 视图模型 morearty.js - 在JavaScript中更好地管理React valuable...ClojureScript中的不可变数据和Datalog查询引擎 immstruct - 不可变数据结构,具有基于组件的(如React)中从上到下属性的历史记录 seamless-immutable...- 创建一个Immutable.js状态一起使用的Redux combineReducers的等效函数 redux-react-i18n - 用于还原/React的i18n溶液 R16N - 还原/

    12.4K30

    python学习之---mutable

    python的数据类型分为mutable(可变) 和 immutable (不可变) mutable : list ,dict inmutable : int , string , float ,tuple...... mutable和immutable 字面意思理解就是说数据可变和数据不可变 由于python的变量(variable)不需要声明,而在赋值的时候,变量可以重新赋值为任意值,这就涉及到Python...的一个重要的核心概念:动态类型(dynamic typing) 在这里重复强调一下在python中一切皆对象,python是血统的面向对象的编程语言,java不同。...什么都是对象,包括你的代码,对象是存储在内存中的实体,我们在程序中使用的都是对象名,只是指向这个对象的一个引用(reference)。...引用和对象分离,是动态类型的核心,引用可以随时的指向一个新的对象 这不同于c++中的指针和引用的概念,在C++中指针在逻辑上是独立存在的,但是引用是和对象绑定在一起的。

    78820

    MobxRedux的异同

    当然他们并不一定要跟React绑定在一起,它们也可以在AngularJs和VueJs这些框架库里使用。...不可变可变 Redux状态对象通常是不可变Immutable,复制代码我们不能直接操作状态对象,而总是在原来状态对象基础上返回一个新的状态对象。...Mobx状态对象通常是可变的Mutable,可以直接使用新值更新状态对象。 状态调试 Redux提供进行时间回溯的开发工具,同时函数以及更少的抽象,让调试变得更加容易。...最后 MobxRedux都是非常棒的两个使用上没有对错,只有合适不合适,只是可能需要在使用之前做好调研工作。...又或许有人需要更加明确的处理对象的变更,那么就可能感觉放弃Mobx的响应式魔法,而使用Redux去通过 JavaScript来推断调试。

    93420

    Immutable.js 到底值不值得用?

    可变数据Redux可变数据是面向功能编程(functional programming)的核心概念,这种概念在JavaScript中的应用已渐占优势。...不少文章已经写到过使用可变数据的优点,主要包括: 简化贯穿程序的数据流 不再需要数据复制的防御机制 优化对数据变化的检测 通过记忆化(memoization)技术提高程序性能 Immutable Immutable...[优点]强化了不可变性 不管选用哪个使用可变数据类型的头一条理由肯定是能够保证做项目的人不能违反不可变原则。...终端日志打印出来的Immutable对象 要解决这个问题,可以在任何Immutable的对象上调用toJS()函数,把对象转换成一个JavaScript对象,再打印出来。...结果 为了使用Immutable,我们重组了一些组件的代码。然后我们重新评估了目前所处的局面,讨论了上面讲的那些方面,结论就是Immutable唯一的好处就是能强化不可变性,但意义何在?

    2K50

    Redux进阶(Immutable.js) 更好的阅读体验Immutable.js原生Js遇到的问题使用Immutable解决问题使用Immutable需要注意的点参考

    Immutable.js Immutable的优势 1. 保证不可变(每次通过Immutable.js操作的对象都会返回一个新的对象) 2. 丰富的API 3....另外其他的第三方可能需要的是一个普通的对象) 2. Immutable的依赖性极强 (一旦在代码中引入使用,很容易传播整个代码,并且很难在将来的版本中移除) 3....只做浅比较,有可能会造成re-redering不符合预期(多次渲染或更新) 为什么不使用深比较 或许有人会疑惑,为什么不使用深比较来解决re-redering的问题,答案很简单,因为消耗非常巨大~...所谓的追踪困难,无非就是因为对象是mutable的,我们无法确定它到底何时何处被改变,而Immutable每次都会保留原来的对象,重新生成一个对象,(redux的函数概念一样)。...除了展示组件以外,其他地方都应该使用Immutable对象 (提高效率,而展示组件是组件,不应该使用) 4.

    1.3K51

    谈谈 JavaScript 函数

    另外,我们可以让 minimum 成为一个不可变immutable)对象,这样就能保留纯粹性,因为状态不会有变化。...副作用是在计算结果的过程中,系统状态的一种变化,或者外部世界进行的可观察的交互。...副作用包括但不限于: 更改文件系统 往数据插入记录 发送一个 http 请求 可变数据 打印/log 获取用户输入 DOM 查询 访问系统状态 概括来讲,只要是跟函数外部环境发生的交互就都是副作用。...函数就是数学上的函数,而且是函数式编程的全部,使用这些函数编程能够带来大量好处。 三、函数好在哪里 1、可缓存性(Cacheable) 首先,函数总能够根据输入来做缓存。...并行代码在服务端 js 环境以及使用了 web worker 的浏览器中很容易实现,因为它们使用了线程(thread)。不过出于对非函数复杂度的考虑,当前主流观点还是避免使用这种并行。

    53420

    ✨从函数讲起,一窥最深刻的函子 Monad

    副作用主要包含: 可变数据 打印/log 获取用户输入 DOM 查询 发送一个 http 请求 Math.random() 获取的当前时间 访问系统状态 更改文件系统 往数据插入记录 举一些常见的有副作用的函数例子...所以,我们在函数内几乎不去引用、修改函数外部的任何变量,仅仅通过最初的形参输入,经过一系列计算后再 return 返回给外部。 但副作用真的太常见了,有时候难以避免使用带副作用的非函数。...我们可以利用这个特性对函数进行“加和乘”的运算,这是重构代码的绝妙手段之一~ 比如: 优化以下代码: var Immutable = require('immutable'); var decrementHP..."}); punch(jobe, michael); 因为 decrementHP 和 isSameTeam 都是函数,我们可以用等式推导、手动执行、值的替换来简化代码: 因为数据不可变,所以 isSameTeam...函数运行环境无关,只要愿意吗,可以在任何地方移植它、运行它,其本身已经撇除了函数所携带的的各种隐式环境,这是命令式编程的弊病之一。

    42210

    深入学习JavaScript ES8函数式编程:特性实践指南

    函数式编程强调不可变性(immutable data)、函数(pure functions)和无副作用(side-effect-free)的概念。...不可变性(Immutable Data) 在函数式编程中,数据一旦创建就不能被更改。任何对数据的修改都会创建一个新的数据对象,而不是在原始数据上进行修改。...数据处理转换 函数式编程非常适合数据处理和转换。您可以使用数组的map、filter和reduce等方法来操作数据集合。...函数组合管道 函数组合和管道是函数式编程中的重要概念。它们允许您将多个函数按顺序组合在一起,创建一个新的函数。...通过了解不可变性、函数、无副作用等核心概念,并利用ES8的新特性,开发者可以编写更具模块化、可维护性和可读性的代码。函数式编程有助于减少错误、提高代码质量,并提高开发效率。

    29040

    Copy-on-write + Proxy = ?

    Immer提供了一种更方便的不可变状态操作方式 二.核心优势 其方便之处主要体现在: 只有一个(核心)API:produce(currentState, producer: (draftState) =...> void): nextState 不引入额外的数据结构:没有 List、Map、Set 等任何自定义数据结构,因此也不需要特殊的相等性比较方法 数据操作完全基于类型:用原生 API 操作数据,符合直觉...能够显著减少无改动副本的资源消耗,而只是略微增加了资源修改操作的开销 应用 COW 策略主要应用在以下几方面: 虚拟内存管理:进程共享虚拟内存、fork()系统调用等 存储:逻辑卷管理、文件系统、数据快照...编程语言:PHP、Qt 中的许多数据类型 数据结构:实现不可变的数据结构,如状态树 以 fork()系统调用为例: ?...{ a: 1 }; const copy = {}; const p = new Proxy(data, { set(target, key, value, receiver) { // 写回

    61110

    精读《Records & Tuples for React》

    保证不可变性 虽然现在 React 也能用 Immutable 思想开发,但大部分情况无法保证安全性,比如: const Hello = ({ profile }) => { // prop mutation...但使用 Record 表示状态,无论 TS 还是 JS 都会报错,立刻阻止问题扩散。... ); 由于 css-in-js 框架对新的引用会生成新 className,所以如果主动保障引用不可变,会导致渲染时 className 一直变化,不仅影响调试也影响性能,而 Record...当然这个提案面临的最大问题就是 “如何将拥有子结构的类型看作原始类型”,也许 JS 引擎将它看作一种特别的字符串更贴合其原理,但难点是这又违背了整个语言体系对子结构的默认认知,Box 装箱语法尤其别扭。...总结 看了这篇文章的畅想,React Records & Tulpes 结合的一定会很好,但前提是浏览器对其性能优化必须 “引用对比” 大致相同才可以,这也是较为少见,对性能要求如此苛刻的特性,因为如果没有性能的加持

    39120

    精读《Records & Tuples 提案》

    immutablejs、immer 等已经让 js 具备了 immutable 编程的可能性,但还存在一些无解的问题,即 “怎么保证一个对象真的不可变”。 如果不是拍胸脯担保,现在还真没别的办法。...但现阶段我们没有任何处理办法,如果不能接受完全使用 Immutablejs 定义对象,就只能摆胸脯保证自己的变更一定是 immutable 的,这就是 js 不可变编程被许多聪明人吐槽的原因,觉得在不支持...Records & Tuples 在用法上对象、数组保持一致 Records & Tuples 提案说明,不可变数据结构除了定义时需要用 # 符号申明外,使用普通对象、数组无异。...Records & Tuples 的标准支持 对 Record Tuple 进行原生数组或对象操作后,返回值也是 immutable 类型的: assert(Object.keys(#{ a: 1...总结 如果这个提案嵌套更新提案一起通过,在 js 使用 immutable 就得到了语言层面的保障,包括 Immutablejs、immerjs 在内的是真的可以下岗啦。

    1.3K20

    C++类设计和实现的十大最佳实践

    使用命名空间模块化代码 现代C++广泛使用命名空间来模块化代码,它们利用“Namespace-by-feature”方法,按功能划分命名空间来反映功能集,将单个特性(且仅该特性)相关的所有内容放到单个命名空间中...从而使得命名空间具有高内聚性和高模块化,并且耦合最小,紧耦合的项目被放在了一起。 Boost是按特性分组的最佳示例,其包含数千个命名空间,每个命名空间用于对特定的特性进行分组。 3....要确定这些职责,通常需要查找字段的子集强耦合的方法的子集。 如果BigClass包含的逻辑比状态多,一个好的选择是定义一个或几个包含静态字段而只包含静态方法的静态类。...最后,BigClass应该是一个没有自己逻辑的接口,可以为了方便将其保留,也可以将其扔掉,并开始只使用新类。 单元测试可以提供帮助: 在提取方法之前为每个方法编写测试,以确保不会破坏功能。 5....不变性有助于多线程编程 基本上,如果对象在创建之后状态不变,那么这个对象就是不可变(immutable)的。如果一个类的实例是不可变的,那么该类就是不可变的。

    1K10

    (转) 谈一谈创建React Component的几种方式

    == nextProps.words 返回的便是flase,从而导致ListOfWords组件没有重新渲染,笔者之前就因为对此不太了解,而随意使用PureComponent,导致state发生变化,而视图就是更新...最简单避免上述情况的方式,就是避免使用可变对象作为props和state,取而代之的是每次返回一个全新的对象,如下通过concat来返回新的数组: handleClick() { this.setState...(prevState => ({ words: prevState.words.concat(['marklar']) })); } 你可以考虑使用Immutable.js来创建不可变对象,...这里还要提到的一点是虽然这里虽然使用了Pure这个词,但是PureComponent并不是的,因为对于的函数或组件应该是没有内部状态,对于stateless component更符合的定义,不了解函数的同学...同时强制你使用可变的对象,保持良好的编程习惯。

    49020
    领券