Redux changes state - Codes Helper - Programming Question Answer

Redux changes state

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

change the table of component 1 when I click the button of component 2, but how do I change the loading back to false after getting the data?

Redux

Mar.05,2021

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) }) }