ant 把数据写在model层

最新推荐文章于 2024-07-03 17:24:09 发布

原创最新推荐文章于 2024-07-03 17:24:09 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #ant

该博客探讨了如何在React应用中使用Ant Design框架，将数据管理置于Model层进行，强调了Model层在状态管理和组件通信中的作用，并详细阐述了在js层如何与Model层交互以实现高效的数据流动。

Model层

export default {
    namespace: 'Statemanagement',
    state: {
        data:[], // 表单内容
        pagination: { // 表单初始属性
            pageSize: 10,
            pageSizeOptions:["10"],
            showSizeChanger: true,
            showTotal: total => `共${total}条数据`,
            showQuickJumper: true,
        },
    },
    effects: {
        *trade({ payload }, { call, put }) {
            const response = yield call( '' , payload);
            if(response.code===200){
              yield put({ type: 'save', payload: {
                data:response.rows, //请求成功会从服务器获取数据放入data中
                pagination: { // 请求成功后从服务传来新的表单属性刷新原有属性
                    pageSize: payload.pageSize,
                    total: response.total,
                    current: payload.pageNum,
                    showTotal: total => `共${total}条数据`,
                    showQuickJumper: true,
                  },
                } 
              });
            } 
        },
    },
    reducers: {
       。。。。。。。。。。。。。。。。。。
    }
}

js层

class Statement extends Component {
  constructor(props){
    super(props);
    this.state={}
  }
  
  componentDidMount() {
    this.submit();
  }
  
  handleSubmit = () => { // 请求数据
    this.props.dispatch({ 
	     type: 'Statemanagement/trade',
	     payload: {},
    }) 
  }

  render() {
    const { data , pagination} = this.props.Statemanagement;// 从model层获取数据
    const columns = []; 
    return (
      <div>    
          <Table rowKey={(item, index) => index} columns={columns} dataSource={data} pagination={pagination} />       
      </div>
    );
  }
}
export default Statement;