没有Redux或Mobx的中央国家管理？

Question

最近我想到了在我的React应用程序中使用中央状态管理而不使用Redux或Mobx的想法，而是选择在Android中创建类似于应用程序类的东西。无论如何，我实现了类似的东西：

在其中创建一个商店文件夹和一个名为store.js的文件，其内容为：

// State
let state = {
    users: {},
    value: 0
};

// Stores references to component functions
let triggers = [];

// Subscription Methods
export const subscribe = trigger => {
    triggers.push(trigger);
    trigger();
}

export const unsubscribe = trigger => {
    let pos = -1;
    for (let i in triggers) {
        if (triggers[i]===trigger) {
            pos = i;
            break;
        }
    }
    if (pos!==-1) {
        triggers.splice(pos, 1);
    }
}

// Trigger Methods
let triggerAll = () => {
    for (let trigger of triggers) {
        trigger();
    }
}

// State Interaction Methods
export const setUser = (name, description) => {
    state.users[name] = description;
    triggerAll();
}

export const removeUser = name => {
    if (name in state.users) {
        delete state.users[name];
    }
    triggerAll();
}

export const getAllUsers = () => {
    return state.users;
}

export const getUser = name => {
    if (!(name in state.users)) {
        return null;
    }
    return state.users[name];
}

export const getValue = () => {
    return state.value;
}

export const setValue = value => {
    state.value = value;
    triggerAll();
}

并以下列方式连接到此商店：

// External Modules
import React, { Component } from 'react';
import {Box, Text, Heading} from 'grommet';

// Store
import {subscribe, unsubscribe, getAllUsers} from '../../store/store';

class Users extends Component {
    state = {
        users: []
    }

    componentDidMount() {
        subscribe(this.trigger); // push the trigger when the component mounts
    }
    componentWillUnmount() {
        unsubscribe(this.trigger); // remove the trigger when the component is about to unmount
    }

    // function that gets triggered whenever state in store.js changes
    trigger = () => {
        let Users = getAllUsers();
        let users = [];
        for (let user in Users) {
            users.push({
                name: user,
                description: Users[user]
            });
        }
        this.setState({users});
    }

    render() {
        return <Box align="center">
            {this.state.users.map(user => {
                return <Box 
                    style={{cursor: "pointer"}}
                    width="500px" 
                    background={{color: "#EBE7F3"}} 
                    key={user.name} 
                    round
                    pad="medium"
                    margin="medium"
                    onClick={() => this.props.history.push("/users/" + user.name)}>
                    <Heading margin={{top: "xsmall", left: "xsmall", right: "xsmall", bottom: "xsmall"}}>{user.name}</Heading>
                    <Text>{user.description}</Text>
                </Box>
            })}
        </Box>;
    }
}

export default Users;

注意。我在网站上测试过这种模式，但它确实有效。看看here。我很抱歉我试图让问题简明扼要，我已经提供了一个更详细的解释模式的实现here

但无论如何，我的主要问题是，可能是不使用它的可能原因，因为我认为如果这很简单，人们就不会使用Redux或Mobx。提前致谢。

Answer 1

这就是Redux和MobX基本上所做的，你错误地认为在他们的核心概念中他们是完全不同的。它们的大小和复杂性是由于它们努力消除错误并适应各种各样的应用案例。而已。虽然他们可能从不同角度接近任务，但核心概念就是这样。也许你应该让自己熟悉他们实际在底下做的事情。

顺便说一句，如果您只需要触发更新，则无需在组件中存储冗余状态。您可以直接致电forceUpdate()：

// function that gets triggered whenever state in store.js changes
trigger = () => {
    this.forceUpdate();
}

这与Redux和MobX绑定的反应类似。