Javascript 用MobX实现React中的单向数据流

我正在尝试使用MobX和React建立一个项目架构，我想知道这样做是否会被认为“不错”。我不想让这个问题变成另一个“这是个人偏好的问题，所以这个问题不属于这里……我们都同意，有些事情真的不好

因此，我考虑只使用一个

Store.js

文件，该文件如下所示：

import { observable, action, useStrict } from 'mobx';

useStrict(true);

export const state = observable({
    title: ''
});

export const actions = {
    setTitle: action((title) => {
        state.title = title;
    })
};

注意：所有应用程序状态都将处于

状态

，只有一个存储

然后在我的根组件a.k.a

App.js

中使用

state

，如下所示：

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { state } from './Store';
import DisplayTitle from './components/DisplayTitle/DisplayTitle';
import SetTitle from './components/SetTitle/SetTitle';

class App extends Component {

  render() {
    return (
      <div className="App">
        <DisplayTitle title={state.title}/>
        <SetTitle />
      </div>
    );
  }

}

export default observer(App);

但是，即使没有其他组件可以直接导入

状态

（除了

App.js

），任何组件都可以从

Store.js

导入

动作

，以改变

状态

例如，在

SetTitle

组件中：

import React, { Component } from 'react';

class DisplayTitle extends Component {
    render () {
        return (
            <h1>{this.props.title}</h1>
        );
    }
}

export default DisplayTitle;

import React, { Component } from 'react';
import { actions } from './../../Store';

class SetTitle extends Component {

    updateTitle (e) {
        actions.setTitle(e.currentTarget.value);
    }

    render () {
        return (
            <input onChange={this.updateTitle} type='text'/>
        );
    }
}

export default SetTitle;

import React，{Component}来自'React'；
从“/../../Store”导入{actions}；
类SetTitle扩展组件{
更新文件（e）{
actions.setTitle（如currentTarget.value）；
}
渲染（）{
返回(
);
}
}
导出默认设置标题；

---

是否有任何缺陷或其他明显的原因说明这种方法不是最好的方法？我希望得到所有的反馈！

您缺少一些东西

在根级别：

import { Provider } from 'mobx-react'
...

<Provider state={state}>
  <Other stuff />
</Provider>

从“mobx react”导入{Provider}
...

在组件级别：

import { inject } from 'mobx-react'

@inject('state')
class Foo ... {
  handleClick(){
    this.props.state.setTitle('foo')
  }
  render(){
    return <div onClick={() => this.handleClick()}>{this.props.state.title}</div>
  }
}

从'mobx react'导入{inject}
@注入（'状态'）
类Foo{
handleClick（）{
this.props.state.setTitle（'foo'））
}
render（）{
返回this.handleClick（）}>{this.props.state.title}
}
}

---

您只能粘贴接口

actions={actions}

在您的提供程序中注入，确保孩子们可以调用您的API方法来改变状态，并使其自下而上流动。尽管如果您直接改变状态，不会产生任何副作用，因为所有组件

都会反应
并在渲染树中更新-flux更清晰。您缺少一些东西

在根级别：

import { Provider } from 'mobx-react'
...

<Provider state={state}>
  <Other stuff />
</Provider>

从“mobx react”导入{Provider}
...

在组件级别：

import { inject } from 'mobx-react'

@inject('state')
class Foo ... {
  handleClick(){
    this.props.state.setTitle('foo')
  }
  render(){
    return <div onClick={() => this.handleClick()}>{this.props.state.title}</div>
  }
}

从'mobx react'导入{inject}
@注入（'状态'）
类Foo{
handleClick（）{
this.props.state.setTitle（'foo'））
}
render（）{
返回this.handleClick（）}>{this.props.state.title}
}
}

您只能粘贴接口
actions={actions}
在您的提供程序中注入，确保子级可以调用您的API方法来改变状态，并使其自下而上流动。尽管如果您直接改变状态，不会产生任何副作用，因为所有组件
都会反应
并在渲染树中更新-flux更清晰