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