Redux --- 简单实现一个todoList (4) --- redux-thunk中间件

比如在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware（中间件）。 在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由。

目的

有了react-thunk后，我们可以把 TodoList.js 中的 componentDidMount 业务逻辑放到这里来编写。也就是把向后台请求数据的代码放到actionCreators.js文件里。这样所有的业务逻辑都在redux中，方便集中管理。

1

安装

yarn add redux-thunk --save

引入，使用

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

const store = createStore(reducer,
	applyMiddleware(thunk)
);

为了能够用redux-dev-tool工具来调试我们的代码，代码需要做一些改动，添加一个增强件compose，以及几行固定代码，如下为index.js的完整代码

import { createStore , applyMiddleware ,compose } from 'redux'  
import reducer from './reducer'    
import thunk from 'redux-thunk'

const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose
    
const enhancer = composeEnhancers(applyMiddleware(thunk))
const store = createStore( reducer, enhancer) 
export default store   

2

react-thunk的好处在于，以前的action是一个对象，现在的action可以是一个函数了。

以前的action是一个对象

onDeleteItem = (selectId) => {
        const action = onDeleteItemAction(selectId);  //调用的是对象
        store.dispatch(action)
    }

export const onDeleteItemAction = (selectId) => ({  //对象：{type:'',value:''}
    type:DELETE_ITEM,
    value:selectId
})

现在的action可以是函数，函数同样写入actionCreator.js

componentDidMount(){
        const action = onGetInitList(); //这里的action为函数
        store.dispatch(action);
    }

把有关的业务逻辑放在onGetInitList 函数中，并且调用onGetInitListType 对象

export const onGetInitList = () =>{  
    return (dispatch) => {
        axios.get("https://5f48b1de57a10f001600ddf3.mockapi.io/api/todoList").then(res =>{
            console.log(res);
            const action = onGetInitListType(res.data);  //这里的action为对象
            dispatch(action);
        })
    }
}

export const onGetInitListType = (data) => ({
    type:GET_INITLIST,
    data
})

藏之介白石❀