使用react-redux实现异步请求
第一步骤：安装react-redux(前提已经安装了redux)
npm install react-redux
建立一个store文件夹，里面放置和store有关的文件
第二步骤：创建store.js
store.js
//react-redux
import {createStore} from 'redux'
import reducer from './reducer';
const store = createStore(reducer)
export default store;
我们看到store.js中引入了一个reducer.js，所以我们也要创建一个reducer.js，里面暂时内容先写成如下默认格式：
reducer.js
const defaultState = {
tableList:[]
}
//reducer 可以接受state但是不可以修改state 只有store才能改变
//纯函数值得是，制定固定的输入，就一定会有固定的输出，而且不会有任何副作用
export default (state = defaultState, action)=> {
console.log(state,action);
return state;
}
第三步骤：用connect建立连接
react中的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import Tablelist from './testTable'
import { Provider } from 'react-redux'
import * as serviceWorker from './serviceWorker';
const App = (
<Provider store={store}>
<Tablelist />
</Provider>
)
ReactDOM.render(App, document.getElementById('root'));
serviceWorker.unregister();
注意：
1.最后的写法是变量App,而不是组件<App/>，千万不要写错了
2. Provider提供器连接到store，内部的所有组件都能连接到store
其中Tablelist.js包裹着header组件和table组件
import React from 'react'
import TestHeader from './testHeader'
import TestTable from './testTable'
class Tablelist extends React.Component{
render(){
return(
<div>
<TestHeader />
<TestTable />
</div>
)
}
}
export default Tablelist
第四步骤：去组件中实现请求
看前须知：
connect能够将store中的数据和组件连接起来，其中connect接收两个参数
第一个参数是：mapStateToProps：把store中的数据映射到这个组件变成props，所以如果要取store中的数据就需要通过this.props.参数
第二个参数是：mapDispatchToProps：将store.dispatch方法挂载到props上
督导这里，大家一定不难发现，其实后者是可以改变store中的数据，然后通过第一个方法能够获取到store中改变的数据，既然改变数据，大多是需要一些方法，所以mapDispatchToProps中常常返回一个方法
header.js
import React from 'react';
import {DatePicker} from 'antd';
import axios from 'axios';
import { connect } from 'react-redux'
const { RangePicker, } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm'||undefined;
class TestHeader extends React.Component{
render(){
return(
<div>
<RangePicker
onChange={this.props.onPickerChange} //注意：由于方法挂载到了props上，所以通过this.props
showTime={{ format: 'HH:mm' }}
format={dateFormat}
placeholder={['开始时间','结束时间']}
/>
</div>
)
}
}
// //将store.dispatch方法挂载到props上
const mapDispatchToProps =(dispatch)=> {
return {
onPickerChange (date, dateString) {
let obj={
beginDate: dateString[0],
endDate: dateString[1],
}
axios
.post("safemgmt/api/queryDeviceInfos",
{
deviceType:"MOBILE",
...obj
},
.then(res=>{
if(res.data.code==="0"){
const data = res.data.result.list
const action = {
type: 'get_params',
tableListdata: data
}
dispatch(action)
}
})
}
}
}
export default connect(null,mapDispatchToProps)(TestHeader)
注意：onChange中的写法一般为{this. onPickerChange}但是由于放在了connect的mapDispatchToProps上，所以变成了this.props.onPickerChange
header请求完数据之后，将table中的数据传递给store，reducer.js会接收到新的状态，所以reducer.js中需要加入处理代码
const defaultState = {
tableList:[]
}
//reducer 可以接受state但是不可以修改state 只有store才能改变
export default (state = defaultState, action)=> {
console.log(state,action);
if(action.type === 'get_params'){
const newState = JSON.parse(JSON.stringify(state))
newState.tableList = action.tableListdata
return newState //返回给了store
}
return state;
}
第五步骤：接收store中改变的状态
Table.js
import React, { Component } from 'react';
import {Table} from 'antd';
import { connect } from 'react-redux'
class TestTable extends Component {
render() {
const columns=[{
//省略内容........
}];
return (
<div>
<Table
columns={columns}
dataSource={this.props.list}
/>
</div>
);
}
}
//把store中的数据映射到这个组件变成props
const mapStateToProps = (state)=> {
console.log(state)
return {
list: state.tableList
}
}
export default connect(mapStateToProps,null)(TestTable);
通过connect的mapStateToProps方法将数据映射到这个组件变成props，所以dataSource={this.props.list}
推荐一个 测试工具 学习网站 推荐: https://testing-library.com/docs/react-testing-library/intro
推荐一个 REACT学习网站: https://www.code-boost.com/tags/