2

我正在看一下 react context api,我决定尝试将其设置为处理登录弹出窗口:

import React, { Component } from 'react';
export const LoginContext = React.createContext();

import firebase from 'firebase';

export class LoginProvider extends Component {
    state = {
        loginOpen: false,
        user: Object
    }
    render() {
        return <LoginContext.Provider value={{
            state: this.state,
            showLogin: () => this.setState({
                loginOpen: true
            }),
            closeLogin: () => this.setState({
                loginOpen: false
            }),
            login: async (username, password) => {
                var auth = firebase.auth();
                try {
                    var that = this;
                    auth.signInWithEmailAndPassword(username, password).then((user)=>{
                        that.setState({user: user, loginOpen: false});
                    });
                }
                catch (E) {
                    return E;
                }
            }
        }}>
            {this.props.children}
        </LoginContext.Provider>;
    }
}

在调用相关函数的 React 组件中使用。

我突然想到 LoginProvider 是一个视图模型。

这让我想知道:我是否正确使用了上下文功能?这是它的预期用途吗?

如果是这样,为什么用法如此陈旧?它提供什么好处?我的意思是它的代码比通过 redux 或 sagas 少,但仍然不必要地繁琐。

4

0 回答 0