react中的 redux-thunk中间件如何使用，如何发送ajax渲染数据？

本文链接：https://blog.youkuaiyun.com/weixin_58089129/article/details/121333221

本文介绍了如何使用redux-thunk中间件在React应用中处理异步action，包括安装、配置和创建异步action。通过示例展示了如何通过axios发送AJAX请求获取数据，并在reducers中处理，最后在组件中渲染数据。同时提到了使用Chrome开发者工具调试Redux状态的方法。

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

redux-thunk的作用：

redux-thunk 中间件可以处理函数形式的 action。因此，在函数形式的 action 中就可以执行异步操作代码，完成异步操作。

步骤：

1、安装： npm i redux-thunk

2.使用：在store/index.js中

导入 redux-thunk , applyMiddleware

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

3.调用applyMiddleware将 thunk 添加到中间件列表中

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

4.在store文件里创建一个actions文件，里面创建一个newsList.js文件用来发送ajax请求

import axios from 'axios'  //导入axios
import { NEWLIST_GET } from '../actionTypes'
export const getNewsList = (id) => {
  const fn = async (dispatch) => {
    const res = await axios.get(
      'http:xxxxxxxxxxxxx'
    )
    console.log('新闻列表', res)
    dispatch({ type: NEWLIST_GET, payload: res.data.data.results })
  }
  return fn
}

在reducers/newsList.js中写如下代码：

import { NEWLIST_GET } from '../actionTypes'
const initState = [] // 所有的新闻列表
export default function newsList (state = initState, action) {
  console.log(action)
  switch (action.type) {
    case NEWLIST_GET:
      return action.payload
    default:
      return state
  }
}