umi状态管理

umi 框架中的状态，主要分为两种，umi 自带的数据流和 dvajs

数据流插件

umi 框架中默认支持数据流插件，数据流可以认为是一个轻量级的状态管理，通过 hooks 管理一个全局状态，通过 callback 进行状态更新。

定义model

在 umi 项目 models 文件下添加 model 文件并定义对应的字段和更新数据的方法：

// src/models/counterModel.ts
import { useState, useCallback } from 'react';

export default function Page() {
  const [counter, setCounter] = useState(0);

  const increment = useCallback(() => setCounter((c) => c + 1), []);
  const decrement = useCallback(() => setCounter((c) => c - 1), []);

  return { counter, increment, decrement };
};

页面中使用状态，通过 useModel(‘counterModel’) 引入，直接试用即可。

import { useModel } from '@umijs/max';
import { Button } from 'antd';
import { ReactDOM } from "react"
export default function Counter(){
    const {counter, increment, decrement} = useModel('counterModel')
    return (
        <>
            <div className="text-4xl">{counter}</div>
            <div className='flex '>
            <Button className='mr-4' onClick={increment}>增加</Button>
            <Button onClick={decrement}>减少</Button>
            </div>
            <h3 className=' text-3xl'>dva</h3>

        </>
    )
}

Dva

使用 dvajs 状态管理框架，dvajs 这个框架已经好几年没有更新了，应该没有人维护了，dvajs 底层是 redux，可以换成 redux，redux 还是很活跃的。使用前要开启 dva，.umirc.ts 中添加配置项 dva: { }。

创建model

在 umi models 目录下，这里我用了官网的例子

export default {
    namespace: 'todos',
    state: [],
    reducers: {
      add(state, { payload: todo }) {
        return state.concat(todo);
      },
      remove(state, { payload: id }) {
        return state.filter(todo => todo.id !== id);
      },
      update(state, { payload: updatedTodo }) {
        return state.map(todo => {
          if (todo.id === updatedTodo.id) {
            return { ...todo, ...updatedTodo };
          } else {
            return todo;
          }
        });
      },
    },
  };

和页面进行连接

在页面中使用 state，首先需要将状态与页面进行关联。

import { connect } from '@umijs/max';
import { Button } from 'antd';
import { ReactDOM } from "react"
const DvaCounter = ({ dispatch, todos}) => {
    
    return (
        <>
            <div className="text-4xl">{todos}</div>
            <div className='flex '>
            <Button className='mr-4' onClick={()=>dispatch({type: "todos/add", payload:"abc"})}>增加</Button>
            <Button onClick={()=>dispatch({type: "todos/add", payload:"abc"})}>减少</Button>
            </div>
            <h3 className=' text-3xl'>dva</h3>

        </>
    )
}

export default connect(({ todos }) => ({
    todos,
  }))(DvaCounter)

状态使用比较简单，复杂的项目还是建议用 redux 来管理状态。