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