redux 改变状态

Question

component 1

import React from 'react';
import {Table} from 'antd';
import {connect} from 'react-redux';

class Trade extends React.Component {
 componentWillMount() {
    const data = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      }, {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      }, {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      }
    ]
    this.props.abcd(data, true)
    console.log(this.props.iData.data)
  }
  render() {
    const aaa = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      }, {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      }
    ];


    return (
      <div>
          <Table
            columns={aaa}
            dataSource={this.props.iData.data}
            loading={this.props.iData.loading}
          />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    iData: state.updateData
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    abcd: (data, loadingState) => {
      dispatch({type: 'CHANGE', item: data, loading: loadingState})
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Form.create({})(Trade));

component 2

import React from 'react';
import {connect} from 'react-redux';
import {Button} from 'antd'



const SubMenu = Menu.SubMenu;
const {Sider} = Layout

class Container extends React.Component {
    buttonClick = () => {
        const data = [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
          }, {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
          }, {
            key: '3',
            name: 'Joe Black',
            age: 33,
            address: 'Sidney No. 1 Lake Park',
          },
          {
            key: '4',
            name: 'aaaaa',
            age: 72138,
            address: 'Sidney No. 1 Lake Park',
          },
        ]
        this.props.qwqw(data,true)
      }
  render() {
    return (
        <div>
          <Button onClick={this.buttonClick}>button</Button>
        </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    getData:state.updateData
  };
}
const mapDispatchToProps = (dispatch) => {
  return {
    qwqw: (data,loadingState) => {
      dispatch({type:'CHANGE',item:data,loadingState:loadingState})
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Container);

reducer

const initState = {
  loading: false
}

const updateData = (state = initState, action) => {
  switch (action.type) {
    case "CHANGE" : {
      Object.assign(state, {data: action.item, loading: action.loadingState})
      return state
    }
    default:
      return state
  }
}
export default updateData

当我点击component 2 的button 时候改变component 1 的table 但是怎么在获取完数据之后loading怎么改回改回false ???

Answer 1

你这样做没什么意义，loading是用在请求接口数据的时候出现的，你这里根本就没有请求数据，渲染也是一瞬间就完成了，所以loading的使用场景就不对。

Answer 2

你是想在 component 2 组件中，当触发buttonClick事件时发请求，请求未返回结果时能够显示loading对吧 ？
那你的buttonClick方法可以这样简单改下：

buttonClick = () => {
        this.props.qwqw([],true)
        
        // 异步：
        setTimeout(() => {
            const data = [
              {
                key: '1',
                name: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
              }, {
                key: '2',
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
              }, {
                key: '3',
                name: 'Joe Black',
                age: 33,
                address: 'Sidney No. 1 Lake Park',
              },
              {
                key: '4',
                name: 'aaaaa',
                age: 72138,
                address: 'Sidney No. 1 Lake Park',
              },
            ]
            this.props.qwqw(data,false)
        })
      }