开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么在action call inn组件中出现“action必须是纯对象。”- error？

在React Redux中，action通常是一个纯对象，它描述了一个操作的类型和数据。然而，在使用action creator时，如果没有正确地返回一个纯对象，就会出现"action必须是纯对象"的错误。

action creator是一个函数，用于创建并返回一个action对象。通常情况下，我们使用Redux中的bindActionCreators或者手动创建action对象来调用action creator。但是在某些情况下，可能会发生错误，导致action creator返回了一个非纯对象。

以下是一些可能导致错误的原因和解决方法：

忘记使用return关键字：在编写action creator时，一定要确保在函数内部使用return关键字返回一个纯对象。例如：return {type: 'ACTION_TYPE', payload: data}。
异步操作返回了一个函数：有时候，我们可能在action creator中进行异步操作，例如从服务器获取数据。如果在异步操作中返回了一个函数而不是纯对象，就会导致错误。解决方法是使用redux-thunk等中间件来处理异步操作，或者使用async/await等语法来确保正确返回纯对象。
使用了错误的语法或逻辑错误：在编写action creator时，要仔细检查代码逻辑和语法错误。确保正确地创建并返回纯对象。

总结来说，出现"action必须是纯对象"的错误通常是由于action creator返回了非纯对象的原因。检查代码逻辑和语法错误，并确保在action creator中正确地返回一个纯对象即可解决此错误。

关于云计算相关的名词词汇和腾讯云产品介绍链接地址，以下是一些例子：

云计算：云计算是一种通过互联网提供计算资源和服务的模式，它可以实现按需访问、快速扩展和灵活配置的计算能力。腾讯云产品介绍链接地址：https://cloud.tencent.com/developer/solution/3
React Redux：React Redux是一个用于管理React应用状态的库。它通过提供一个可预测的状态容器，简化了组件间数据流的管理。腾讯云产品介绍链接地址：https://cloud.tencent.com/product/trtc
redux-thunk：redux-thunk是一个Redux中间件，用于处理异步操作。它允许action creator返回函数而不是纯对象，并支持在函数中进行异步操作。腾讯云产品介绍链接地址：https://cloud.tencent.com/product/cdb
async/await：async/await是JavaScript中处理异步操作的语法糖。它简化了异步代码的编写，并使代码更具可读性。腾讯云产品介绍链接地址：https://cloud.tencent.com/product/cls

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

深入学习和理解 Redux

（上下文）在小型、不太复杂的应用中，一般用以上几种组件通信方式基本就足够了。...首先得从Reducer说起，之前 Redux三大原则里面提到了reducer必须是纯函数，下面给出纯函数的定义：对于同一参数，返回同一结果结果完全取决于传入的参数不产生任何副作用至于为什么reducer...必须是纯函数，可以从以下几点说起？...最佳的办法是 Redux返回一个新对象，新旧对象通过浅比较，这也是 Reducer是纯函数的重要原因。...Reducer是纯函数，但是在应用中还是会需要处理记录日志/异常、以及异步处理等操作，那该如何解决这些问题呢？这个问题的答案就是中间件。

8622 0

redux你用对了吗？

store 中 State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。...什么是纯函数？前面我们介绍 redux 三大原则的时候提到过，修改 state 要编写 reducer，且 reducer 必须是一个纯函数，那么问题来了，什么是纯函数呢？...维基百科里是这么定义纯函数的: 在程序设计中，若一个函数符合以下要求，则它可能被认为是纯函数此函数在相同的输入值时，需产生相同的输出。...为什么reducer需要返回一个全新的state 上面我们介绍了什么是纯函数，redux 里面规定 reducer 必须是一个纯函数，并且每个纯函数需要返回一个全新的state，那么这里大家肯定就有一个疑问...比如，state 和 newState 是两个不同的对象，这两个对象里面的 content 属性在我们的场景中是不需要修改的，因此 content 属性可以指向同一个对象，但是因为 title 被一个新的对象覆盖了

5853 0

Redux（四）：源码分析之createStore

如果使用了combineReducers()函数来创建根reducer，那么这个值必须是一个对象，且和combineReducers()函数的参数对象拥有相同key。...} dispatch()函数接收一个action作为参数，通常这个action是一个包含type属性的纯对象。...通过中间件的拓展，action可以是promise、函数，但最终传递给底层的依然是纯对象。 195行处可以看到执行reducer来计算得出新的currentState并覆盖之前的值。...isPlainObject：纯对象检查函数。纯对象（Plain Object）指的是通过字面量形式或者new Object()形式定义的对象。...new Date()); console.log(typeof new RegExp()); js是基于原型链的，纯对象的原型是一个特殊对象，这个特殊对象没有原型的，处于最顶层： ({}).

1.2K5 0

React之redux学习日志（reduxreact-reduxredux-saga）

使用纯函数执行修改：reducer中，应该返回一个纯函数，函数接受先前的 state和action，然后返回一个新的 state 3....' // create-action：每个action都返回一个纯对象，type是约定必须 import { GET_USERINFO_ACTION } from '..../action-type' // 创建一个默认的仓库，一般提出来会更加清晰 const defaultState = { userInfo: {} } // reducer必须是一个纯函数 const...上面已经在react中入口文件中注入了react，接下创建一个组件来对redux进行简单的使用新建 ReduxTest 组件 import React, { Component, Fragment }...中只能返回一个对象，从而需要借助一些中间件来达到目的，redux-thunk 和 redux-saga是常见的两种中间件。

5513 0

从 Redux 设计理念到源码分析

前言 Redux 也是我列在 THE LAST TIME 系列中的一篇，由于现在正在着手探究关于我目前正在开发的业务中状态管理的方案。所以，这里打算先从 Redux 中学习学习，从他的状态中取取经。...为什么要使用 Redux 如上所说，我们现在是状态驱动 UI,那么为什么需要 Redux 来管理状态呢？react 本身就是 state drive view 不是。...{ // 在 Action 的这个接口上额外扩展的另外一些任意字段（我们一般写的都是 AnyAction 类型，用一个“基类”去约束必须带有 type 字段） [extraProps: string...一个样纸 if (isDispatching) { throw new Error( 'You may not call store.subscribe() while...dispatch function dispatch(action: A) { // action必须是个普通对象 if (!

9393 0

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

什么是 Redux Action？在 Redux 中，具有 type 属性的普通对象就被称为 action。...如何保持纯 Reducers 另一个关于 reducers 的规则是它们必须是纯函数。也就是说不能修改它们的参数，也不能有副作用（side effect）。...Reducer 规则二：Reducers 必须是纯函数。 “副作用（side effect）”是指对函数作用域之外的任何更改。...Reducer 函数必须是“纯”的 —— 不能修改它的参数，也不能有副作用（side effect）。...Actions 生成器在 Redex 术语中是一个简单的函数术语，它返回一个 action 对象。就这些 :) 这是其中两个，返回熟悉的 actions。

4.2K2 0

Redux（五）：源码分析之combineReducers

nextState : state } } 首先，combineReducers()的参数是一个纯对象，对象的key应与初始state树的key一一对应，value就是处理对应的key的相关reducer...unexpectedKeyCache用于存放那些不存在于preloadedState中的key。...state是对象，对象是按地址引用的，如果使用了React，这样可以避免一些重复无意义的渲染。 65行——97行定义assertReducerShape()函数。...初始preloadedState必须是一个纯对象。 combineReducers的参数key应该与preloadedState相对应。...三、总结 combineReducers的参数必须是一个纯对象对象参数的value必须是函数对象参数的key必须与preloadedState的key有对应 reducer不可以返回undefined

9735 0

DvaJS入门解析

action 必须带有 type 属性指明具体的行为，其它字段可以自定义，如果要发起一个 action 需要使用 dispatch 函数；需要注意的是 dispatch 是在组件 connect Models...); }) //return {x:1, y:2, z:3} 在 dva 中，reducers 聚合积累的结果是当前 model 的 state 对象。...需要注意的是 Reducer 必须是纯函数，所以同样的输入必然得到同样的输出，它们不应该产生任何副作用。...至于为什么我们这么纠结于纯函数，如果你想了解更多可以阅读Mostly adequate guide to FP，或者它的中文译本JS函数式编程指南。...所以在 dva 中，通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational

7463 0

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

在聊之前，大家要始终记得一句话：一切前端概念，都是纸老虎。不管是Vue，还是 React，都需要管理状态（state），比如组件之间都有共享状态的需要。什么是共享状态？...所以就需要规定一下，组件不允许直接修改属于 store 实例的 state，组件必须通过 action 来改变 state，也就是说，组件里面应该执行 action 来分发 (dispatch) 事件通知..., action) => state 为什么叫做 Reducer 呢？...Action呢，就是一个纯对象，放不了操作。那想来想去，只能在 View 里发送 Action 的时候，加上一些异步操作了。...单一状态树的好处是能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

5.3K2 0

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

所以就需要规定一下，组件不允许直接修改属于 store 实例的 state，组件必须通过 action 来改变 state，也就是说，组件里面应该执行 action 来分发 (dispatch) 事件通知..., action) => state 为什么叫做 Reducer 呢？...Action呢，就是一个纯对象，放不了操作。那想来想去，只能在 View 里发送 Action 的时候，加上一些异步操作了。...单一状态树的好处是能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。...不再是掺杂在 action.js 或 component.js 中。

5.5K1 0

React全家桶与前端单元测试艺术｜洞见

为什么谈测试？因为测试难。第一难学，第二难写。写测试是个挺困难的活，要在测试里正确重演业务要费好大劲，只能靠反复练习。虽然这些测试在某些项目中是值得的，但是可能并不适合其他某些项目的基本情况。...(机械也是极限的一部分，你不应该在使用工具过程中面临太多抉择，而应当专注于将业务翻译成测试)。 为什么谈React全家桶？...因此我们的测试必须减少共享状态来提高并发能力，不然就会出现意想不到的错误。安装和运行： yarn add ava ava --watch 这样可以运行并watch测试。...它们全都是(State, Action) => nextState形式的纯函数，无异步操作，用swtich case来模拟模式匹配来处理事件。...为什么最后还是会出现很多随机现象呢？声明优于命令，描述发生什么、想要什么比亲自指导具体步骤好。消息机制优于调用机制。Smalltalk > Simula。

1.1K7 2

dva框架-快速了解

，如果有异步，必须借助effect effects：副作用（业务逻辑，包含同步和异步）这里的键名，就是action中type的字段 payload: action传参数，都放在这里...call() : 表示调用异步函数如果yield call的是一个Promise对象，那只有在Promise返回的是resolve方法的情况下，下面跟着的yield...中type的字段*/ *getData({payload},{call,put}){ const res = yield call(getTodolistDataApi...'))} /> ); } export default RouterConfig; 0 8 组件中的路由跳转...Start app.start('#root'); 0 9 routes文件夹，类似pages 和react 组件的写法一样，对于model中的状态使用，也使用connect方法，与redux的使用方法相似

1.7K1 0

Redux流程分析与实现

这三大原则包括： • 单一数据源整个应用的State被存储在一个状态树中，且只存在于唯一的Store中。...且Reducer必须是一个纯函数，当Reducer接收到Action时，Action并不能直接修改State的值，而是通过创建一个新的状态对象来返回修改的状态。...Action Action是一个普通的JavaScript对象，其中的type属性是必须的，用来表示Action的名称，type一般被定义为普通的字符串常量。...在Redux中，State的变化会导致View的变化，而State状态的改变是通过接触View来触发具体的Action动作的，根据View触发产生的Action动作的不同，就会产生不同的State结果。...其中，reducer函数必须是一个纯函数，该函数会返回一个新的state。

1.1K3 0

React进阶(3)-上手实践Redux-如何改变store中的数据

给Input组件绑定onChange事件监听事件处理函数定义action对象,确定动作类型,这个action必须遵循一定的规则,得是一个对象,当然在后续当中,怎么支持函数,又是另外的知识了的 3....在Reducer中会接收到action,通过if等判断,确定要执行state的操作,这个reducer必须是个纯函数,要有返回值,返回的结果会返回给store,这里的state是上一次(原先)组件的状态...'){ // 对原有的state进行一个深拷贝,在redux中,redux是不允许直接修改state的,但可以接收state,这也是为什么当我们拿到state后,我们需要拷贝一份数据...reducer这个函数中完成的,并且它是一个纯函数,必须要有返回值在Reducer函数中,接收两个参数,第一个是上一次组件的状态值,而第二个是组件具体的动作action,具体要干的什么事情在reducer...action,首先换房子是一个动作,在元素上绑定相应的事件在该监听事件内,定义一个action动作,确定要做的事件类型,这个action必须遵循一定的规则,必须是一个对象定义好action动作后,

2.6K3 0

一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.快速上手Dva 概念#例子和脚手架Dva 图解K

action 必须带有 type 属性指明具体的行为，其它字段可以自定义，如果要发起一个 action 需要使用 dispatch 函数；需要注意的是 dispatch 是在组件 connect Models...); }) //return {x:1, y:2, z:3} 在 dva 中，reducers 聚合积累的结果是当前 model 的 state 对象。...需要注意的是 Reducer 必须是纯函数，所以同样的输入必然得到同样的输出，它们不应该产生任何副作用。...至于为什么我们这么纠结于纯函数，如果你想了解更多可以阅读Mostly adequate guide to FP，或者它的中文译本JS函数式编程指南。...所以在 dva 中，通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational

1.4K3 0

Redux异步解决方案之Redux-Thunk原理及源码解析

Redux-Thunk前我们dispatch的action必须是一个纯对象(plain object)，使用了Redux-Thunk后，dispatch可以支持函数，这个函数会传入dispatch本身作为参数...比如，似乎我们必须将dispatch作为参数传递，这让我们分隔容器组件和展示组件变得更困难，因为任何发出异步Redux action的组件都必须接收dispatch作为参数，这样他才能将它继续往下传。...而且他会将这些函数action“吃了”，所以不用担心你的reducer会接收到奇怪的函数参数。你的reducer只会接收到纯对象action，无论是直接发出的还是前面那些异步函数发出的。...(this.props.dispatch, 'You just logged in.') } 但是我们提取action creator的目的就是为了集中这些在各个组件中重复的逻辑。...这就是为什么你可以在thunk中返回一个Promise并且等他完成： dispatch(someThunkReturningPromise()).then(...)

3.6K5 1

你想要的——redux源码分析

大家好，今天给大家带来的是redux（v3.6.0）的源码分析~首先是redux的github接下来我们看看redux在项目中的简单使用，一般我们都从最简单的开始入手哈备注：例子中结合的是react进行使用...reducer和运用中间件的函数const store = createStore( reducer, applyMiddleware(...middleware))// 将store作为属性传入，这样在每个子组件中就都可以获取这个...的定义,其实action就是一个对象，对象中约定有一个必要的属性type，和一个非必要的属性payload；type代表了action的类型，指明了这个action对state修改的意图，而payload...// 这里判断一下action是否是一个纯对象，如果不是则抛出错误 if (!...` ) } // 如果actionCreators是一个对象，则获取对象中的key const keys = Object.keys(actionCreators) // 定义一个缓存对象

1811 0

React进阶(3)-上手实践Redux-如何改变store中的数据

给Input组件绑定onChange事件监听事件处理函数定义action对象,确定动作类型,这个action必须遵循一定的规则,得是一个对象,当然在后续当中,怎么支持函数,又是另外的知识了的 3....在Reducer中会接收到action,通过if等判断,确定要执行state的操作,这个reducer必须是个纯函数,要有返回值,返回的结果会返回给store,这里的state是上一次(原先)组件的状态...'){ // 对原有的state进行一个深拷贝,在redux中,redux是不允许直接修改state的,但可以接收state,这也是为什么当我们拿到state后,我们需要拷贝一份数据...reducer这个函数中完成的,并且它是一个纯函数,必须要有返回值在Reducer函数中,接收两个参数,第一个是上一次组件的状态值,而第二个是组件具体的动作action,具体要干的什么事情在reducer...action,首先换房子是一个动作,在元素上绑定相应的事件在该监听事件内,定义一个action动作,确定要做的事件类型,这个action必须遵循一定的规则,必须是一个对象定义好action动作后,store

2.2K2 0

前端实现异步的几种方式_redux是什么

为什么要多用纯函数呢？因为它们具有很强的“可预测性”。既然有纯函数，那肯定有不纯的函数喽，或者换个说法，叫做有“副作用”的函数。...=> console.log(error)) 再到ES6中引入的Generator函数： function* mySaga(value0) { try { var value1 = yield step1...这条指令是一个纯Javascript对象（类似于action）： { CALL: { fn: Api.fetchUser, args: ['alice'] } } 这样，当我们需要测试...Generator函数时，就可以用一条简单的assert语句来比较两个Effect对象（即使不在Redux环境中）： assert.deepEqual( iterator.next().value,...提供了一系列API函数来生成Effect对象，比较常用的是下面这几个： call：函数调用 select：获取Store中的数据 put：向Store发送action take：在Store

1.7K3 0

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

中，我们将功能划分为小型可重用的纯函数，我们必须将所有这些可重用的函数放在一起，最终使其成为产品。...这用于在组件树中出现错误时记录错误。超越继承的组合在React中，我们总是使用组合而不是继承。我们已经在函数式编程部分讨论了什么是组合。这是一种结合简单的可重用函数来生成高阶组件的技术。...因为我们将javascript对象传递给style属性，所以我们可以在组件中定义一个style对象并使用它。...Action: Action 只是一个简单的json对象，type 和有payload作为键。type 是必须要有的，payload是可选的。下面是一个 action 的例子。...// action { type:"SEND_EMAIL", payload: data }; Action Creators：这些是创建Actions的函数，因此我们在派发action时不必在组件中手动编写每个

18.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭