Redux進階四：使用react-redux實現異步請求

如果我的前幾篇進階你都已經看完，那麼恭喜你，最後一個新的技術點需要攻破哦~介紹另一種比較方便的插件react-redux,我們還是實現上篇的功能，如下圖：
兩個組件是分離的狀態，沒有任何父子關係，通過header中的日期，請求接口，使下面的table中的數據同步顯示

第一步驟：安裝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組件

Tablelist.js

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
          }, 
          {headers:{token:'eyJhbGciOiJBMTI4S1ciLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0.1F72mlXkLPxZly4UugZ3Td2XSO2dPntS_VaS1LxKNlGwTKTkgFOmJQ.8YjUTaJn653y9SwKe6Xtlg.kWoO5Ik3sPqexOlkVYNOJMbUgjnbTjMdjntbSDHysmFMpSeUwALVCbSupgEbgqKb.KeKLLP6iTmUoxM4ihkfT3A'}})
          .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}