React学习24（redux异步action）

最新推荐文章于 2025-07-10 09:33:18 发布

原创最新推荐文章于 2025-07-10 09:33:18 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript

本文介绍了如何在Redux应用中使用redux-thunk中间件来处理异步Action。通过在action creator中返回一个函数，可以执行异步任务并在完成时调用同步Action更新状态。在`store.js`中配置中间件，在`count_actions.js`中创建异步Action，最后在组件中调用这些Action。示例展示了如何创建和使用异步Action，以及它们在实际应用中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）明确：延迟的动作不想交给组件自身，想交给action

2）何时需要异步action：想要对状态进行操作，但是具体的任务靠异步任务返回

3）具体编码：

A、安装：npm i redux-thunk，并配置在store,js中，同时需要引入thunk和引入

applyMiddleware中间件

B、创建action的函数不在返回一般对象，而是一个函数，该函数中写异步任务

C、异步任务有结果后，分发一个同步的action去真正的操作数据

D、备注：异步任务不是必须要写的，完全可以自己等待异步任务的结果之后再去分发同步

action

store.js

/*
  该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore, applyMiddleware} from 'redux'

//引入为Count组件服务的reducer
import countReducer from './count_reducer'

//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'

export default createStore(countReducer, applyMiddleware(thunk))

count_actions.js

/*
  该文件专门为count组件生成action对象
*/
import { INCREMENT, DECREMENT } from "./constant"
//完整写法
// function createIncrementAction(data) {
//   return {type:'increment', data }
// }
//简写形式
export const createIncrementAction = data =>( {type:INCREMENT, data })

//完整写法
// function createDecrementAction(data) {
//   return {type:'decrement', data}
// }
export const createDncrementAction = data =>( {type: DECREMENT, data })

//异步action，就是值action的返回值是函数，异步action一般都会调用同步action
//异步action不是必须要用的
export const createIncrementAsyncAction = (data, time) =>{
  return (dispatch) => {
    setTimeout(() => {
      dispatch(createIncrementAction(data))
    },time)
  }
}

count-index.jsx

import React, { Component } from 'react'
//引入store，用于获取redux中获取的状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import { createIncrementAction, createDncrementAction, createIncrementAsyncAction} from '../../redux/count_action'

export default class Count extends Component {
  state = {carName:'奔驰c63'}//  把状态交给reducer之后组件也可以有自己独用的状态

  increment = () => {
    const {value} = this.selectNum
    store.dispatch(createIncrementAction(value*1))
  }
  decrement = () => {
    const {value} = this.selectNum
    store.dispatch(createDncrementAction(value*1))
  }
  incrementOdd = () => {
    const {value} = this.selectNum
    const count = store.getState()
    if(count % 2 !== 0) {
      store.dispatch(createIncrementAction(value*1))
    }
  }
  incrementWait = () => {
    const {value} = this.selectNum
    store.dispatch(createIncrementAsyncAction(value*1, 500))
  }
  render() {
    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={c => {this.selectNum = c}}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick= {this.increment}>+</button>&nbsp;
        <button onClick= {this.decrement}>-</button>&nbsp;
        <button onClick= {this.incrementOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick= {this.incrementWait}>等一等再加</button>
      </div>
    )
  }
}