Redux模式（reduck）

1、定义

redux模式常规用法是作为整个应用全局状态管理使用。
这只是作为一个提高跨组件通信的能力的工具。
redux的思想是作为独立于组件的一个数据仓库，对数据进行保护，保障数据稳定可靠。

简单理解redux就是一个带保护的全局使用的Context（useContext）。

2、优点：数据隔离，数据变化可溯源。

针对于原生的提供了数据保护（dispatch+reducer），对于更改只允许使用dispatch进行更改。能够保障可回溯性，数据来源清晰，能够十分良好的隔绝副作用。

3、缺点：多redux直接完全隔离，小型化困难，action方法容易膨胀。

对于大型项目拆分设计概念不足，store数据个人管控不友好，容易造成理解困难逻辑修改困难。

4、选择

如果组件之间的交流不多，逻辑不复杂，只是单纯的进行视图的渲染，这时候用回调，context就行，没必要用redux，用了反而影响开发速度。

但是如果组件交流特别频繁，逻辑很复杂，那redux的优势就特别明显了。

5、使用

首先，在项目src文件夹下的model文件夹中创建一个存放全局变量的文件。这里可以创建多个，根据文件名字即可引用到相应的全局文件。

然后在文件中可以直接使用react hooks的方法。这里以useState为例

import { useState } from 'react';

export default function globalFun() {
    const [count, setCount] = useState<number>(0);
    return {
        count,
        setCount
    };
}
1
2
3
4
5
6
7
8
9

最后在需要使用到全局变量的文件中引入即可。

import { useModel } from 'umi';

const {count, setCount} = useModel("xxx");  // xxx处填入创建model文件的名字

console.log(count);

return (
    <div onClick={()=>setCount(1)}></div>
)
1
2
3
4
5
6
7
8
9