React-Redux-Thunk是一个用于处理Redux异步操作的中间件,它扩展了Redux的能力,使您能够更轻松地处理异步操作,如网络请求或定时任务。
通常,Redux的reducers是同步的,但在现实应用中,需要在数据获取或其他异步操作完成后才能更新状态。这就是React-Redux-Thunk发挥作用的地方。
异步数据既然要保存到 Redux 中, 所以获取异步数据也应该是 Redux 的一部分,所以获取异步数据的代码应该放到 Redux 中, 而不是放到组件生命周期方法中。
默认情况下 dispatch 只能接收一个对象, 使用 redux-thunk 可以让 dispatch 除了可以接收一个对象以外, 还可以接收一个函数, 是的通过 dispatch 派发一个函数的时候能够去执行这个函数, 而不是执行 reducer 函数。
npm install redux-thunk
修改 store.js:
import {createStore, applyMiddleware} from 'redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './reducer';
// 创建store之前,通过applyMiddleware方法,告诉Redux需要应用哪些中间件
const storeEnhancer = applyMiddleware(thunkMiddleware);
// 利用store来保存状态(state)
const store = createStore(reducer, storeEnhancer);
export default store;
export const getUserInfo = (dispatch, getState) => {
fetch('http://127.0.0.1:7001/info')
.then((response) => {
return response.json();
})
.then((data) => {
console.log('在action中获取到的网络数据', data);
})
.catch((error) => {
console.log(error);
});
}
import React from 'react';
import {getUserInfo} from "../store/action";
import connect from "../connect/connect";
class About extends React.PureComponent {
componentDidMount() {
this.props.changeInfo();
}
render() {
return (
<div>
<p>{this.props.info.name}</p>
<p>{this.props.info.age}</p>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
info: state.info
}
};
const mapDispatchToProps = (dispatch) => {
return {
changeInfo() {
dispatch(getUserInfo);
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(About);
export const getUserInfo = (dispatch, getState) => {
fetch('http://127.0.0.1:7001/info')
.then((response) => {
return response.json();
})
.then((data) => {
dispatch(changeAction(data));
})
.catch((error) => {
console.log(error);
});
}
默认情况下 dispatch 方法只能接收一个对象, 如果想让 dispatch 方法除了可以接收一个对象以外, 还可以接收一个方法, 那么我们可以使用 redux-thunk 中间件, redux-thunk 中间件的作用,可以让 dispatch 方法可以接收一个函数, 可以让我们在通过 dispatch 派发任务的时候去执行我们传入的方法。
--------------------
------> | Component 异步请求 | -----
| -------------------- |
| ↓
------------- ------------- -------------
| Store | <---- | Reducer | <---- | Action |
------------- ------------- -------------
-------------
---------> | Component | ---------------------------------
| ------------- |
| ↓
------------- ------------- ------------- -------------
| Store | <---- | Reducer | <---- | 异步请求 | <---- | Action |
------------- ------------- ------------- -------------
本期结束咱们下次再见👋~
🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。