2021-03-25

React学习笔记

Redux中发送异步请求获取数据

1. 添加一个生命周期函数（异步请求）

//在TodoList.js中，render函数下方添加
componentDidMount(){
	axios.get('./list.json').then((res)=>{
		//获取成功就能接受res
		const data=res.data;
		const action = initListAction(data);
		store.dispatch(action);
	})
}

2. 改变store

//在actionCreators.js文件中
import INIT_LIST_ACTION from './actionTypes';
export const initListAction = (data)=>({
	type:INIT_LIST_ACTION,
	data
});
//返回的是一个对象，action

//在reducer.js文件
export default(state=defaultState,action)=>{
	if (action.type === INIT_LIST_ACTION){
		const newState = JSON.parse(JSON.stringfy(state));
		newState.list= action.data;
		return newState;
	}

}

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

安装Redux-thunk（安装好后记得重启项目）

//使用npm
npm install --save redux-thunk
//使用yarn
yarn add redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';

const composeEnhancers = widow._REDUX_DEVTOOLS_EXTENSION_ && window._REDUX_DEVTOOLS_EXTENSION_()
const enhance = composeEnhancers(
applyMiddleware([thunk],
);
const store = createStore(
reducer,
enhancer
);
//thunk是一个Redux中间件，
export store

//actionCreators.js文件中
//本来函数返回的是一个对象，但使用thunk后，就可以返回一个函数，在返回函数里面做异步操作
export const getTodoList=()=>{
	return ()=>{
		axios.get('./list.json').then((res)=>{
		//获取成功就能接受res
		const data=res.data;
		const action = initListAction(data);
		store.dispatch(action);
	}
}

如何使用thunk这个中间件：

1. 首先安装thunk
2. 在创建store使用thunk这个中间件，通过enhancer，并将enhancer作为createSore的第二个参数传递（配置环境）可以在组件中写异步函数

注意：
使用thunk之后，异步函数就能返回函数，反之没有就只能返回一个对象