其他分享
首页 > 其他分享> > 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送

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

作者:互联网

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

<style></style> <style></style> <style></style>

      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 并写入

<style></style>

      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 添加 类型判断      

<style></style>

      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 请求

<style></style>

标签:const,请求,thunk,发送,获取数据,action,redux,data,store
来源: https://www.cnblogs.com/zonehoo/p/11972656.html