React-使用Redux-thunk中间件实现ajax数据请求

最新推荐文章于 2025-05-30 09:05:31 发布

原创最新推荐文章于 2025-05-30 09:05:31 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Redux-thunk

react 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何利用Redux-thunk中间件来管理React应用中的异步操作，特别是ajax数据请求。通过将异步逻辑移到actionCreators.js中，可以避免组件变得过于复杂，同时便于自动化测试。在设置过程中，涉及安装依赖、配置store、编写action和reducer，以及在组件中调用这些action。关键点在于action返回的是一个函数，而不是对象，并且在处理返回的数据时需要注意将数据转换为immutable对象。

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

把异步函数放在生命周期函数里写，生命周期函数会变得越来越复杂，组件会变得越来越大。Redux默认只处理同步，借助redux-thunk ,可以把异步请求放在actionCreators.js里管理，而且有利于自动化测试。中间件指的是是action 与store的中间，是redux的中间件,它使得我们可以在action中写函数（返回函数）

安装依赖

npm install redux-thunk --save

src文件下的store文件夹

index.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
// 配置react-tools使用
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(
	applyMiddleware(thunk)
));

export default store;

actionCreator.js

import axios from 'axios';
import { fromJS } from 'immutable';

export const getList = () => {
	return (dispatch) => {
		axios.get('/api/headerList.json').then((res) => {
			const data = res.data;
			dispatch(changeList(data.data));
		}).catch(() => {
			console.log('error');
		})
	}
};

// 将data由普通数组变成immutable数组

const changeList = (data) => ({
	type: constants.CHANGE_LIST,
	data: fromJS(data),
	totalPage: Math.ceil(data.length / 10)
});

reducer.js文件

import * as constants from './constants';
import { fromJS } from 'immutable';
// 将state设置为不可变对象
const defaultState = fromJS({
	focused: false,
	mouseIn: false,
	list: [], // 也会变成immutable数组
	page: 1,
	totalPage: 1
});

export default (state = defaultState, action) => {
	switch(action.type) {
		case constants.CHANGE_LIST:
           //因为在actionCreator.js中我们已经将action.data转换成immutable数组
           //  return state.set('list',action.data) 
			return state.merge({
				list: action.data,
				totalPage: action.totalPage
			});
		default:
			return state;
	}
}

在组件中调用

const mapDispathToProps = (dispatch) => {
	return {
		handleInputFocus(list) {
			 dispatch(getList());
		}
	}
}

关键点：

1、我们将ajax交互放到action中，并且action返回的不再是一个对象，而是一个函数，则必须要用redux-thunk

2、当我们或许到列表数据，要改变store中的list数据，我们要注意，因为state包裹了一层fromJs,所以list也变成了immutable数组对象，我们需要在actionCreator里面，传递action之前，将data也转换成immutable数组