Redux之使用redux-thunk进行ajax请求发送

快来打我* 2022-05-20 09:39 150阅读 0赞

# 1：中间件流程图 #

![70][]

# 2：Redux-thunk作用： #

简单说：当组件中有复杂的异步请求时，为了减少组件的复杂程度

把异步请求使用此中间件放在actionCreator.js中

# 3：使用之前 #

使用之前是在组件内进行数据请求

*store/index.js*

//store.js
    
    import {createStore,applyMiddleware} from 'redux';
    import reducer from './reducer';
    import thunk from 'redux-thunk';
    
    //1-store是唯一的
    //2-只有store才能改变自己的内容（state）
    //3-reducer必须是纯函数
    const store = createStore(
        reducer,
    );
    export default store;

*TodoList.js *

//TododList.js
    //视图渲染之后使用axios进行ajax请求，进行初始化
    componentDidMount(){
       axios.get('https://api.github.com/users')//上面已经引入地址
           .then((res)=>{
              // console.log(res);//得要所有结果
               const data=res.data;//具体看数据
             //  console.log(data)
               const action=initListAction(data);
               store.dispatch(action);
           })
    
    }

*store/actionCreator.js *

//actionCreator.js
    export const initListAction=(data)=>({
        type:INIT_LIST_ACTION,
        data,
    });

# 4:使用 #

使用之后是在actionCreator.js中进行网络请求

### 4.1：安装： ###

npm install --save redux-thunk

### 4.2:使用：在store/index.js中引用（已经安装了react官方脚手架） ###

*store/index.js *

import {createStore,applyMiddleware} from 'redux';
    import reducer from './reducer';
    import thunk from 'redux-thunk';
    
    //1-store是唯一的
    //2-只有store才能改变自己的内容（state）
    //3-reducer必须是纯函数
    const store = createStore(
        reducer,
        applyMiddleware(thunk),//这个方法表示：使用thunk这个中间件
    );
    export default store;

*TodoList.js *

//TododList.js
        //视图渲染之后使用axios进行ajax请求，进行初始化
        componentDidMount() {
            const action = getTodoList();//此时action返回的不再是一个对象，而是一个函数，
            store.dispatch(action);//此时action是个函数，这个函数执行完了之后，才最后转发给store，store自动转发给reducer
        }

*store/actionCreator.js  *

//actionCreator.js
    export const initListAction=(data)=>({
        type:INIT_LIST_ACTION,
        data,
    });
    
    //使用redux-thunk中间件之后允许返回一个函数
    export const getTodoList=()=>{
        return (dispatch)=>{
            axios.get('https://api.github.com/users')//上面已经引入地址
                .then((res)=>{
                    const data=res.data;
                    const action=initListAction(data);
                    dispatch(action);//转发给调用此方法的常量
                })
    
        }
    };

[70]: /images/20220520/465f1d4a5cee439b94364ae9dc592ddd.png