使用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/