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

react-redux,thunk中间件安装,class component - error“操作必须是纯对象。而实际的类型是:'Promise'”分派

React-Redux是一个用于在React应用中管理状态的库。它结合了React和Redux,提供了一种可预测的状态管理解决方案。Thunk中间件是Redux的一个中间件,用于处理异步操作。

要安装React-Redux和Thunk中间件,可以按照以下步骤进行操作:

  1. 首先,确保你已经在项目中安装了React和Redux。可以使用以下命令进行安装:
代码语言:txt
复制
npm install react redux
  1. 接下来,安装React-Redux和Thunk中间件。可以使用以下命令进行安装:
代码语言:txt
复制
npm install react-redux redux-thunk
  1. 安装完成后,在你的应用程序的入口文件中,引入React-Redux和Thunk中间件:
代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 替换为你的根reducer文件路径

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
  1. 现在,你可以在你的组件中使用React-Redux提供的connect函数来连接Redux的状态和操作到你的组件中。例如:
代码语言:txt
复制
import React from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions'; // 替换为你的action文件路径

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    // 渲染组件
  }
}

const mapStateToProps = (state) => {
  return {
    data: state.data // 替换为你的状态属性
  };
};

const mapDispatchToProps = {
  fetchData // 替换为你的操作方法
};

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

以上是使用React-Redux和Thunk中间件的基本步骤。当你在class component中使用Thunk中间件时,如果出现错误“操作必须是纯对象。而实际的类型是:'Promise'”,通常是因为你的action creator返回了一个Promise而不是一个纯对象。

为了解决这个问题,你可以在action creator中使用Thunk来处理异步操作,并确保在异步操作完成后返回一个纯对象。例如:

代码语言:txt
复制
export const fetchData = () => {
  return (dispatch) => {
    // 异步操作
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
      });
  };
};

在上面的例子中,fetchData函数返回了一个函数,这个函数接受dispatch作为参数,并在异步操作完成后使用dispatch来分派一个纯对象。

希望以上解答对你有帮助!如果你需要了解更多关于React-Redux和Thunk中间件的信息,可以参考腾讯云的相关文档和产品介绍:

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

相关·内容

深入Redux架构

Action 就是 View 发出通知,表示 State 应该要发生变化了。 Action 一个对象。其中type属性必须,表示 Action 名称。...(1)fetchPosts返回了一个函数,普通 Action Creator 默认返回一个对象。...但是,又带来了一个新问题,Action 由store.dispatch方法发送store.dispatch方法正常情况下,参数只能对象,不能函数。...因此,异步操作第一种解决方案就是,写出一个返回函数 Action Creator,然后使用redux-thunk中间件改造store.dispatch。...实际项目中,你应该权衡一下,直接使用 Redux,还是使用 React-Redux。后者虽然提供了便利,但是需要掌握额外 API,并且要遵守它组件拆分规范。

2.2K60

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

,就是函数类型,在使用Redux-Thunk前我们dispatchaction必须一个对象(plain object),使用了Redux-Thunk后,dispatch可以支持函数,这个函数会传入...// 这个普通对象action store.dispatch({ type: 'INCREMENT' }) // 但是有了Thunk,他就可以识别函数了 store.dispatch(function...而且他会将这些函数action“吃了”,所以不用担心你reducer会接收到奇怪函数参数。你reducer只会接收到对象action,无论直接发出还是前面那些异步函数发出。...我之前就告诉过你:只要使用了Redux Thunk,如果你想dispatch一个函数,不是一个对象,这个中间件会自己帮你调用这个函数,而且会将dispatch作为第一个参数传进去。...你可能会发现很多例子都返回了Promise,这个不是必须,但是用起来却很方便。Redux并不关心你thunk返回了什么值,但是他会将这个值通过外层dispatch()返回给你。

3.4K51

Redux原理分析以及使用详解(TS && JS)

,派发给 redux Store action 对象,会被 Store 上多个中间件依次处理,值得注意这些中间件会按照指定顺序一次处理传入 action,只有排在前面的中间件完成任务之后,...4.2、redux-promise 使用redux-promise中间件,允许action一个promise,在promise中,如果要触发action,则通过调用resolve来触发 4.3、redux-sage.../redux/action/product' class Home extends Component { componentDidMount() { //取出值 const...,但是,这整个Action方法,返回一个async,async其实本质也就是promise对象,那么又是一个异步对象,所以它外部不会等待,当代码执行到await这块, 因为需要时间来调用接口,所以会跳出去...//此处item我写定义类型接口 useEffect(() => { if(manage.userNameData !

3.8K30

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

Reducer 一个函数,对于相同输入,永远都只会有相同输出,不会影响外部变量,也不会被外部变量影响,不得改写参数。...中间件 刚才说到都是比较理想同步状态。在实际项目中,一般都会有同步和异步操作,所以 Flux、Redux 之类思想,最终都要落地到同步异步处理中来。...Action呢,就是一个对象,放不了操作。那想来想去,只能在 View 里发送 Action 时候,加上一些异步操作了。...也就是说,任何被发送到 store action 现在都会经过thunkpromise,logger 这几个中间件了。...显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成支持异步处理中间件。比如 redux-thunk 或 redux-promise

5.4K10

react知识总结_六年级教学工作总结个人

大家好,又见面了,我你们朋友全栈君。 简介 这次要总结对 store 和 reducer 拓展,比如发送异步 action 操作,还有一个就是对多个 reducer 管理。...store 第三个参数 目前 store 并不具备处理异步 action 能力,我们可以使用 中间件 来实现这个操作。...dispatch ,另一个 getState ,然后在里面进行异步操作,我这里设置了 2秒 然后添加了一个用户,点击之后,过了 2秒 我用户才会被添加进去,页面也是等到 2秒 后重新渲染。...logger) // 按照严格循序 ); 上一种方法使用 Action Creator 返回函数来操作异步,使用 redux-promise 可以让它返回一个 promise 对象,可以使用...总结 以上三个中间件都是对 store 拓展,使用 applyMiddleware 并且分别传入三个 中间件 ,传入时必须要遵循顺序,否则会出问题: applyMiddleware(thunk,

64820

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

Reducer 一个函数,对于相同输入,永远都只会有相同输出,不会影响外部变量,也不会被外部变量影响,不得改写参数。...中间件 刚才说到都是比较理想同步状态。在实际项目中,一般都会有同步和异步操作,所以 Flux、Redux 之类思想,最终都要落地到同步异步处理中来。...Action呢,就是一个对象,放不了操作。那想来想去,只能在 View 里发送 Action 时候,加上一些异步操作了。...显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成支持异步处理中间件。比如 redux-thunk 或 redux-promise 。...和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:异步数据获取相关业务逻辑放在了单独 saga.js 中,不再掺杂在 action.js 或 component.js

5.2K20

深入学习 Redux 之中间件与异步操作

一、什么中间件 ---- 如果我们框架作者,要添加功能,会在哪个环节添加: ① Reducer:函数,只承担计算 State 功能,不合适承担其他功能,而且理论上函数不能进行读写操作。...但是,又带来了一个新问题,Action 由 store.dispatch 方法发送 store.dispatch 方法正常情况下,参数只能对象,不能函数。...另一种异步操作解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用 redux-promise 中间件。...写法一,返回值一个 Promise 对象。...注意,createAction第二个参数必须一个 Promise 对象。 看一下 redux-promise 源码,就会明白它内部怎么操作

1K20

单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

也就是说,任何被发送到 store action 现在都会经过thunkpromise,logger 这几个中间件了。...缺点就是用户要写代码有点多,可以看到上面的代码比较啰嗦 promise只是在action中payload作为一个promise中间件内部进行处理之后,发出新action。...,不是处理逻辑,reducer里面处理要好一些,但是同样会生出几个多余action类型进行处理,而且也只能promise,不能做复杂业务处理。...redux-saga优势 Redux 处理异步中间件 redux-thunk 和 redux-promise,当然 redux 异步中间件还有很多,他们可以处理大部分场景,这些中间件思想基本上都是把异步请求部分放在了...Action== - 状态更新计算:==reducer== - 限制:reducer必须函数,不支持异步 - 特性:支持中间件 ###### VUEX - 核心对象:store - 数据存储:state

3.6K40

React之redux学习日志(reduxreact-reduxredux-saga)

Redux 搭配 React 使用 安装: npm install --save react-redux 3.1. react-redux在React中使用方式   · 在react入口文件中注入.../action-type' // 创建一个默认仓库,一般提出来会更加清晰 const defaultState = { userInfo: {} } // reducer必须一个函数 const...userInfo: {} //} // 转换为 immutable 数据格式 const defaultState = fromJS({ userInfo: {} }) // reducer必须一个函数...当我们需要执行一些异步操作时,由于action中只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga常见两种中间件。   ...redux-thunk 主要是使action能够返回一个函数达到目的,这样导致了action函数变得复杂   redux-saga 可以将异步操作单独分离出来封装到某些模块,这样保证action函数更加干净

53330

Rematch: Redux 重新设计

假设reducer与action类型匹配,那么我们可以对参数进行反转,这样每个reducer都是一个接受state 和action函数。...在许多方面,thunk 工作方式看起来更像是一个聪明黑客,不是官方推荐解决方案。...我们一步一步来看: 你派发一个action(dispatch an action),它实际一个函数不是预期对象thunk 中间件检查每个动作,看看它是否一个函数。...一个简单 action 到底作为一个动态类型对象、一个函数,还是一个 Promise?这难道不是一种拙劣实践吗? 如上图右边所示,难道我们就不能只使用 async/await ? 4....将这两种类型 action 区分开来,将比上面的thunk用法更有帮助,也更容易理解。 5.

1.5K50

字节前端面试被问到react问题

这种机制可以让我们改变数据流,实现如异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...函数中间件主要目的就是修改dispatch函数,返回经过中间件处理dispatch函数redux使用:实际就是再次调用循环遍历调用reducer函数,更新state什么 React Context...适用observable保存数据,数据变化后自动处理响应操作redux使用不可变状态,这意味着状态只读,不能直接去修改它,而是应该返回一个新状态,同时使用函数;mobx中状态可变,可以直接对其进行修改...中有更多抽象和封装,调试会比较困难,同时结果也难以预测;redux提供能够进行时间回溯开发工具,同时其函数以及更少抽象,让调试变得更加容易react-redux 实现原理?...进行遍历、对比等可以中断,歇一会儿接着再来。commit阶段对上一阶段获取到变化部分应用到真实DOM树中,一系列DOM操作

2.1K20

《彻底掌握redux》之开发一个任务管理平台

实际项目中我们往往不会直接使用redux,我们会搭配使用react-redux等库,通过将react和redux以更优雅方式结合到一起来开发更加可维护项目。...3. redux相关生态使用(react-redux, keymirror, reduce-reducers) 3.1 react-redux react-redux核心思想将所有组件分成渲染组件...异步action解决方案redux-thunk 在了解异步action之前我想先来聊聊redux中间件机制。...( reducer, initial_state, applyMiddleware(thunk) ); 值得注意中间件使用顺序要注意,一定要按照官方规则和具体业务顺序来排列中间件。...异步action本质上返回一个函数,在函数里面执行相关操作,但是普通action返回一个对象,那么如何去处理呢?

1K30

Reduxreact-reduxredux中间件设计实现剖析

我们已经知道,在使用dispatch时候,我们会给dispatch()传入一个action对象,这个对象包括我们要修改state以及这个操作名字(actionType),根据type不同,store...订阅更新,代码相对冗余,我们想要合并一些重复操作react-redux就提供了一种合并操作方案:react-redux提供 Provider和 connect两个API,Provider将store...Provider extends React.Component { // 需要声明静态属性childContextTypes来指定context对象属性,context固定写法...可以看到,控制台先输出了中间件logger1打印结果,然后进入thunk中间件打印了'thunk',等待一秒后,异步dispatch被触发,又重新走了一遍logger1 -> thunk -> logger2...console.log('离开logger2') ) console.log('离开logger1') ) 因此我们可以看到,中间件执行顺序实际这样

2.2K20

06-React状态管理 Redux(工作流程, 核心概念, 求和案例, 异步Action, React-Redux, 多状态管理, 函数, 高阶函数, Redux开发者工具)

,以及它使用情况, 我就不过多写概念了, 主要写使用方式 Redux工作流程 三个核心概念 Action 动作对象 包含两个属性 字段 作用 数据类型 是否唯一 是否必填 type 标识属性 字符串...用于初始化状态, 加工状态 加工时, 依据旧state和action,产生新state函数 Store 将state, action, reducer 联系在一起对象 如何获取: import...action对象, 如果对象是Object, 那么就是同步action, 如果函数, 那么就是异步action 添加依赖 yarn add redux-thunk 编写异步函数 /** * 该文件专门为...,random等不纯方法 reduxreducer函数必须一个函数 高阶函数 理解: 一类特别的函数 情况1: 参数函数 情况2: 返回函数 常见高阶函数: 定时器设置函数 数组forEach...()/map()/filter()/reduce()/find()/bind() promise react-reduxconnect函数 作用: 能实现更加动态, 更加可扩展功能 Redux开发者工具

1.9K20
领券