如果我的前几篇进阶你都已经看完，那么恭喜你，最后一个新的技术点需要攻破哦~介绍另一种比较方便的插件react-redux,我们还是实现上篇的功能，如下图：
两个组件是分离的状态，没有任何父子关系，通过header中的日期，请求接口，使下面的table中的数据同步显示
image.png
第一步骤：安装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);
网友评论