umi + dva + antd 随笔

题记：随便记下自己使用的经验，给自己mark

项目中主要分3块 model server compontent ；

server 模块用于封装的请求 ，

  export async function (val) {
  
  //封装的请求方法 request() ,
                  moethod:'post || get '，
                  data:{...val} 
  }

model 模块用来处理逻辑

        const ${moaelname} = {
        state={ 自定义接收reducer要传过来的值的名称：‘’ },
        effects:{ 
        //demo演示，用来处理请求，把请求方法暴露给component
        *fectname （{payload,callback}，{call,put}） {
              const response = yield call(severce中的请求方法名，payload)；
              // 第一种处理方式
              try {
                    //处理返回结果逻辑
                    if(){} else {}
              }catch(err)
              {console.log(err)}
           }
              //第二种处理方式
              yield put({
                    type:'reducers中的处理方法名'，
                    payload：response.data
              })
         }
        reducers：{
              name（state，action）{
               return（...state，state中要暴露出去自定的名称：action.payload）     
              }
        }
         subscriptions:{
                   //#其他地方搬运过来的
　　               // 订阅监听，比如我们监听路由，进入页面就如何，可以在这写
                    //这里的代码，运行起来就会自动执行，在任意models写都可以。而且方法名是任意的，这个setup是自己起的名字；
              setup ({ dispatch, history, query }) {
              return history.listen(async ({ pathname, search, query}) => {
                    if (pathname==="/testdemo") {// 当进入testdemo这路由，就会触发fetchUser方法
                          dispatch({ type: "fetchUser" })
                          }
                    })
              }
              
        } 

compontent 模块用来调用model模块中写的方法

  demo:
  先用@connect把model和component链接起来
  @connect（model的命名空间，loading）{
        model的命名空间，
        loading：loading.models.model的命名空间
  }
  class name extends Componten{}
  ---------分割线------------
  const {dispatch} = this.props;
  dispatch({
      type:'请求的model命名空间/model中effects写的方法名'  ，
      payload：发送的请求参数
  })
  //获取请求的结果
  const { model命名空间:{ model中state定义的接收返回变量 } } = this.props;