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