如果我的前几篇进阶你都已经看完, 那么恭喜你, 最后一个新的技术点需要攻破哦~ 介绍另一种比较方便的插件 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);
通过 connect 的 mapStateToProps 方法将数据映射到这个组件变成 props, 所以 dataSource={this.props.list}
来源: http://www.jianshu.com/p/90bf04b80e91