ali系状态管理总览

1. dva

// store
import { getUserList } from '../services/user'

export default {
    namespace:'user',
    
    state: {
        userList:[]
    },

    // 一加载就执行
    subscriptions:{
    },

    reducers:{
        updateUserList(state, { payload }){
            return { ...state, userList: payload }
        }
    },

    effects:{
        *toGetUserList({ payload },{ call, put }){
            console.log('----页面传过来的payload', payload);
            const userList = yield call(getUserList, payload)
            yield put({type:'updateUserList', payload:userList})   
        }
    }
}

// 页面使用 connect注入store
import { connect } from 'dva';
import React from 'react';

class UserList extends React.Component {
    componentDidMount() {
      const { dispatch } = this.props
      dispatch({type:'user/toGetUserList', payload: {page:1,size:2}})
    }
    render () {
      console.log('UserList props', this.props)
      const { userList, history } = this.props
      return (
        <div>
          <h1>用户列表</h1>
          <div>
          {
            userList.map(ele=>(
              <div
                onClick={()=>history.push('/user/info/'+ele.id)}
                key={ele.id}>
                {ele.id} - {ele.content} 
              </div>
            ))
          }
          </div>
        </div>
      )
    }
  }
  
  export default connect(model=>model.user)(UserList)

注：（1）dva使用的是"react": "^16.2.0"版本 用不了hooks （2）dva没有集成immer只能使用 { ...state, userList: payload }等方式改变状态

2. umi

import { getCartList, getCode, saveUserInfo, getUserInfo,getFavList,delAfav } from '@/pages/services'
import moment from 'moment';
// 状态管理
// https://umijs.org/zh-CN/plugins/plugin-dva#usestore

export default{
    namespace:'user',
    // 初始化数据
    
    state:{
        cartList:[],
        code:'',
        userInfo:[],
        favList:[]
    },
    reducers:{
        updateDetails(state:any, { payload }:any){
            // 如果immer未开启，只能这样修改state
            // return {...state, list: payload}
            // 如果immer开启了，可以像vuex一样地修改state
            state.cartList = payload
        },
        updateCode(state:any, { payload }:any){
            state.code = payload.data.code
        },
        updateUserInfo(state:any, { payload }:any){
            state.userInfo = payload
        },
        updateFavList(state:any, { payload }:any){
            console.log(payload);
            payload.map((ele:any)=>{
                ele.time = moment(payload.time).format("YYYY-MM-DD")
            })
            state.favList = payload
        },
    },
    effects:{
        *getList({payload}:any, {call,put}:any){
            console.log(payload);
            console.log(call);
            console.log(put);
            const cartList = yield call(getCartList, {})
            yield put({type:'updateDetails', payload:cartList})
        },

        *sendYzm({payload}:any, {call,put}:any){
            const code = yield call(getCode, payload)
            yield put({type:'updateCode', payload:code})
        },

        *saveUserInfo({payload}:any, {call,put}:any){
            yield call(saveUserInfo, payload)
            // yield put({type:'updateInfo', payload:res})
        },
        *getUserInfo1({payload}:any, { call,put}:any){
            const userInfo =  yield call(getUserInfo, payload)
            yield put({type:'updateUserInfo', payload:userInfo.data.userInfo})
        },
        *getFavList({payload}:any, { call,put}:any){
            const favList =  yield call(getFavList, payload)
            yield put({type:'updateFavList', payload:favList.data.favList})
        },
        *delAfav({payload}:any, { call,put}:any){
            yield call(delAfav, payload)
        },
    }
}

// 掉接口
import { request } from "umi"

export const getCartList =()=>{
    return new Promise(resolve=>{
        resolve([
            {
                id:1,
                content:'第一两车'
            },
            {
                id:2,
                content:'第二两车'
            },
            {
                id:3,
                content:'第三两车'
            },
        ])
    })
}
export const getCode = (params:any)=>{
    return request("/api/v2/email",{
        params: {
            email:params
        }
    })
}
export const saveUserInfo = (data:any)=>{
    console.log('data----', data);
    
    return request('/api/v2/saveUserInfo',{
        method: 'post',
        data
      })
}
export const getUserInfo = (data:any)=>{
    console.log('data----', data);
    
    return request('/api/v2/getUserInfo1',{
        method: 'post',
        data:{
            id:data
        }
      })
}
export const getFavList = ()=>{
    return request('/api/v2/getFavList',{
        method: 'post',
    })
}
export const delAfav = (id:any)=>{
    return request('/api/v2/delAfav',{
        method: 'post',
        data:{
            id
        }
    })
}

-- 页面使用

注：.umirc.ts 做配置（路由、title、layout...）详细看官网

3. pro 状态管理参考： https://www.jianshu.com/p/b3b3ce85a8d7

注：umi 与 pro 异曲同工 （翻文档）