0

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

在其中创建一个 store 文件夹和一个名为 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;

笔记。我已经在一个网站上测试了这种模式并且它有效。在这里查看。我很抱歉，我试图让问题对 stackoverflow 保持简洁，我在这里提供了对模式实现的更详细的解释

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

4

1 回答 1

0

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

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

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

这类似于 Redux 和 MobX 的 react 绑定。

于 2019-03-10T07:27:00.420 回答