Redux Thunk好用吗？优缺点分析都在这！

今儿个咱来聊聊Thunk，这玩意儿在Redux里头可是个好帮手，专门对付那些个异步操作，说白就是让你的数据请求啥的更顺溜。

先来个开胃小菜：装Thunk

咱得先把Thunk给弄进项目里。这还不简单？打开你的命令行，敲上这么一句：

npm install redux-thunk

或者你用yarn也成：

yarn add redux-thunk

Redux Thunk好用吗？优缺点分析都在这！

安装好，这事儿就算成大半。

接着来，配置你的Store

装好Thunk，接下来得让Redux知道它的存在。找到你配置Redux Store的那块代码，一般在src/store/*或src/*，加上几行：



import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 你的reducer
const store = createStore(
rootReducer,
applyMiddleware(thunk) // 把thunk塞进去


export default store;

瞧见没？就是把thunk给applyMiddleware一下，这步不能少，少Thunk就没法儿干活。

开始动真格：写Action

Redux Thunk好用吗？优缺点分析都在这！

Thunk的精髓就在于，它让你的Action能返回一个函数，而不是一个简单的对象。这函数里头，你想干啥都行，发请求、等结果，随你便。下面是一个例子：


// *
export const fetchData = () => {
return (dispatch) => {

dispatch({ type: 'FETCH_DATA_START' }); // 先告诉大家，我要开始取数据
fetch('你的数据地址') // 发请求
.then(response => *())
.then(data => {
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }); // 成功，把数据扔给reducer


.catch(error => {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }); // 失败，也得吱一声

看看，这Action返回的函数里头，咱先dispatch一个开始取数据的信号，然后用fetch去取数据，成就把数据dispatch出去，失败也把错误信息dispatch出去。这中间的dispatch就是Redux给的，Thunk在背后默默支持着。

Reducer也得出马

Action写好，Reducer这边也得接招。Reducer就是根据Action的类型，来决定怎么更新数据状态：



// *
const initialState = {
data: [],
loading: false,
error: null,


const dataReducer = (state = initialState, action) => {
switch (*) {
case 'FETCH_DATA_START':
return {
...state,
loading: true, // 开始取数据，loading设为true

error: null,

case 'FETCH_DATA_SUCCESS':
return {
...state,
loading: false, // 成功，loading设为false

data: *, // 数据来

case 'FETCH_DATA_FAILURE':
return {
...state,
loading: false, // 失败，loading也设为false

error: *, // 错误信息也得存着

default:
return state;



export default dataReducer;

Reducer里，咱根据不同的Action类型，分别处理开始取数据、取数据成功、取数据失败这三种情况。这样，你的应用就知道啥时候该显示加载中，啥时候该显示数据，啥时候该显示错误。

一步，用起来！

万事俱备，只欠东风。在你的组件里，把Action给dispatch出去就行：

Redux Thunk好用吗？优缺点分析都在这！


import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';
function MyComponent() {

const dispatch = useDispatch();
const { data, loading, error } = useSelector(state => *); // 假设你的reducer叫dataReducer
useEffect(() => {
dispatch(fetchData()); // 进来就取数据
}, [dispatch]);
if (loading) {

return 
加载中...
;

if (error) {
return 
出错：{*}
;

return (


{*(item => (






export default MyComponent;