react中的state状态管理（个人流程理解）---小白篇

前言：对于react的状态管理这一部分，尤其是在融合了项目里面后，各个流程步骤有点拎不清。特以一个小点入手，理解记录一下。会有理解不当之处，请指正。小白式理解，欢迎大神赐教。

背景：该用户管理页面分为左右两个部分，左侧采用antd的树组件实现对区域的展示，右侧为点击相应的树节点后展示的用户列表，点击操作可以对用户进行相应的编辑和删除。以删除为例。

删除其实是一个很简单的操作，一般记住id之后调用后台接口就行了，前端只需要把参数传过去。

但是在这个功能中，有一点小变化，需要同时记住用户的id和用户所在树节点才可以，也就是需要这两个参数。而且由于每次点击的树节点不同，所以会更改状态，也就是说，要在models层里面，在state中定义一个regionCode用于保存当前点击节点状态。

//user/models.js
export default modelExtend(pageModel, {
    namespace: 'user',

    state: {
         //会改变的状态
         regionCode: '',

回到index层，这个状态改变是发生在当点击左侧树的时候产生的，所以进入到点击左侧菜单的事件中进行更改：

//user/index.js 
const leftTree = {
        
        nodeClick(node, isNode) {
            currentNode = node;

 dispatch({
                type: 'user/updateState',
                payload: {
                    regionCode: currentNode.code,
                },
            })
        },

在进行点击时，除了要将查询分发出去之外，也要把当前节点状态分发到相应的命名空间下的“更新状态”中，而此时对应的models层中，按照分发的类型及路径，对状态同时进行相应的更改，在控制台可以打印输出所记录的regionCode。

现在到删除事件中，进行参数的传递：

//user/index.js
const listProps = {
        dataSource: data,
     
        regionCode,
        onChange(page) {
            
            
      
        onDeleteItem(id) {
            console.log(regionCode)
            dispatch({
                type: 'user/deleteUser',
                payload: {
                    user_id: id,
                    region_code: regionCode,
                },
            })            
           
        },
       }

将后台所需要的两个参数通过payload传到相应的models层，。

对删除的调用写在了用户列表组件中：

//user/components/list.js
const handleClick = (record, e, props) => {
    if(e.key === '1') {
        props.onEditItem(record)
        
    } else if (e.key === '2') {
        confirm({
            title: 'Are u sure to delete？',
            onOk () {
                props.onDeleteItem(record.id)
            },
        })
    }
}

需要理解的是，状态在model层和视图层其实都是同步的，毕竟两者已经通过connect链接起来了。

首先，先看看第一张图，图中展示了Redux的单向数据流，以及Action、Reducer和Store这三个核心概念。

上文中提到的connect：

connect方法的主要作用就是让Component与Store（上文中的model层）进行关联， Store的数据变化可以及时通知Views（上文中的index）重新渲染。

任何一个通过connect()函数处理过的组件（将index与model连接）都可以得到一个dispatch方法作为组件的props，以及得到全局state中的所有内容。

---

先放个链接，作为备用参考：

https://www.cnblogs.com/wilber2013/p/5403350.html。

 

后续待更。