16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送

时间:2022-11-01 15:45:18

1.发送异步请求获取数据

  1.引入 axios ( 使用 yarn add axios 进行安装 )

    import axios from 'axios';

  2. 模拟 在元素完成挂载后加载数据 并初始化 redux

    # TodoList.js

    componentDidMount(){

      axios.get('http://xxx/xxx').then( ( response ) => {

        const data = response.data;

        const action = {

          type: 'init_store_data',

          value: data

        }

        store.dispatch(action);

      })

    }

    # reducer.js

    export default (status, action)=>{

      if( action.type === 'init_store_data' ){

        const newState = JSON.parse(JSON.stringify( status ));

        newState.list = action.value ;

        return newState;

      }

    }

2. 使用Redux-thunk中间件进行 ajax 请求发送

  当 ajax请求很多 的时候 需要把 异步请求分装到其他地方进行管理

  此时就需要 使用 redux-thunk

  1. 安装 redux-thunk

    yarn add redux-thunk

  2.使用 redux-thunk

    创建 store 并使用 applyMiddleware 引入 redux-thunk 方法

    #store/index.js



      import {createStore, applyMiddleware, compose} from 'redux';

      import reducer from './reducer';

      import thunk from 'redux-thunk';

      // 校验 redux devtool 是否存在

      const composeEnhancers =

          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?

          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

      // composeEnhancers 引入 thunk 中间件

      const enhancer = composeEnhancers(

        applyMiddleware(thunk)

      );

      // 合并后的中间件 作为 redux 的中间件

      const store = createStore(reducer, enhancer);

      export default store;

    #创建 action 文件夹 并在 action 文件夹下创建 index.js 并写入

      import axios from 'axios';

      export const loadInitData = ()=>{

      return (dispatch)=>{

          axios.get('http://index.com/front/article')

          .then((res)=>{

               const data = res.data.data.map((val)=>val.title);

                const action = {

                    type : 'init_data',

                    value : data

                }

                dispatch(action);

              })

         }

      }

    # store 下的 reducer.js 添加 类型判断      

      if(action.type === 'init_data'){

      const newState = JSON.parse(JSON.stringify(state))

      newState.list = action.value;

      return newState;

     }

    # TodoList.js 修改 componentDidMount

      import { loadInitData } from './action';

      componentDidMount(){

      const action = loadInitData();

      store.dispatch(action);

      }

    即可异步发送 ajax 请求