Question

我正在尝试使用MobX和React设置项目架构，并且想知道是否会考虑这样做以及＃34;不坏＆＃34;。我不希望这个问题最终成为另一个问题＆＃34;这是个人偏好的问题，所以这个问题并不属于这里......我们都同意某些事情真的是坏。

所以我想只有一个Store.js文件看起来像这样：

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

useStrict(true);

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

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

注意：所有申请状态都在state，只有一个商店。

然后我在我的根组件a.k.a state中使用App.js，如下所示：

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);

我的应用程序中显然有很多组件，但没有一个组件会直接从state读取Store.js。只有我的App.js将导入状态并将其传递给组件树。

另一个注释：我不再确定为什么其他组件无法直接从Store.js读取状态...

DisplayTitle组件就是这种情况：

import React, { Component } from 'react';

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

export default DisplayTitle;

但是，即使没有其他组件可以直接导入state（App.js除外），任何组件都可以从actions导入Store.js为了改变state。

例如在SetTitle组件中：

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;

为什么这种方法不是最好的路线，是否存在任何缺陷或其他明显的原因？我喜欢任何反馈！

Answer 1

你遗漏了一些东西

在根级别：

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

<Provider state={state}>
  <Other stuff />
</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>
  }
}

您只能在提供程序中粘贴接口actions={actions}并注入该接口，确保子级可以调用您的API方法来改变状态并使其自下而上流动。虽然你要直接改变它，但是没有任何副作用会发生，因为所有组件willReact并在你的渲染树中更新 - 通量更清晰。

与MobX

1 个答案: