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