全局状态管理Dva的使用

前两天项目(Antd + Umijs)项目中传值不方便, 于是便想到了store全局状态管理
看了下文档Umijs既然内置了那就直接按照文档搞起~ 传送门 👈🏻
文档里比较详细,原理 场景 配置项 范例一应俱全.

简书文章	https://www.jianshu.com/p/e184cd6d253c
Dva	https://dvajs.com/
Redux	https://www.redux.org.cn/

---

我没有用Umi中的@connect反而是用的Dva中的connect,都差不多

// src/models/test.ts
const model = {
    namespace: "test",
    state: {
        key: 0,
    },
    effects: {
        // Effect是一个 Generator 函数，内部使用 yield 关键字，标识每一步的操作
        // 获取
        // https://zhuanlan.zhihu.com/p/111615561
        *query({ payload }, { call, put, select }) {
            // console.log( payload );
            yield call(payload.Debug); //?

            yield put({
                type: "add50",
                payload: {
                    value: 50,
                },
            });

            return "成功";
        },
    },
    reducers: {
        // reducer 是 Action 处理器，用来处理同步操作，
        // 更新state
        // 启用 immer 之后
        add(state, { payload }) {
            state.key = state.key + payload.value;
        },
        add50(state, { payload }) {
            state.key = state.key + 50;
        },
        asyncAdd(state, { payload }) {
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    state.key = state.key + 1;
                    resolve(null);
                }, 2000);
            });
        },
    },
    subscriptions: {
        setup({ dispatch, history }) {
            return history.listen(({ pathname }) => {
                console.log(`setup`);

                if (pathname === "/") {
                    dispatch({
                        type: "query",
                    });
                }
            });
        },
    },
};
export default model;

// src/pages/demo/store1.tsx
import React, { useState } from "react";
import { history, useLocation } from "umi";
import { connect } from "dva";

const Store = ({ dispatch, test }) => {
    const addSome = () => {
        dispatch({
            type: "test/add",
            payload: {
                value: 100,
            },
        });
    };
    const addFifty = () => {
        dispatch({
            type: "test/query",
            payload: {
                Log: Log,
                Debug,
            },
        }).then((res) => {
            console.log(res);
        });
    };

    const Log = () => {
        console.log(`Log`);
    };
    const Debug = () => {
        console.log(`Debug`);
    };

    return (
        <>
            <div>
                {<p>页面1key的值：{test.key}</p>}
                <button onClick={() => addSome()}>加上传入的Number</button>
                <button onClick={() => addFifty()}>固定加Number</button>
            </div>
        </>
    );
};
export default connect((state) => state)(Store);

还是补一版@connect写法吧,这里不是函数式编程,是继承类:

import React, { useState } from "react";
import { history, useLocation } from "umi";
// import { connect } from "dva";
import { connect } from "umi";

@connect(({test})=>({
    test,
}))

class Store2 extends React.Component {
    constructor(props) {
        console.log(props);
        
        super(props);

        

    }

    Log = () => {
        console.log(`Log`);
    };
    Debug = () => {
        console.log(`Debug`);
    };


    addSome = () => {
        this.props.dispatch({
            type: "test/add",
            payload: {
                value: 100,
            },
        });
    };

    addFifty = () => {
        this.props.dispatch({
            type: "test/query",
            payload: {
                Log: this.Log,
                Debug: this.Debug,
            },
        }).then((res) => {
            console.log(res);
        });
    };

   

    render() {
        return (
            <div
                onClick={() => {
                    this.props.dispatch({
                        type: 'user/test',
                    });
                }}
            >
                {this.props.test.key}
                <button onClick={this.addFifty}>固定加Number</button>
            </div>
        );
    }
}

export default Store2;